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整理 : 飞龙 


JavaScript 基础 


JavaScript 简介 


JavaScript 是 世界 上 最 流行 的 编程 语言 。 


这 门 语言 可 用 于 HTML 和 web， 更 可 广泛 用 于 服务 器 、PC、 笔 记 本 电脑 、 


机 等 设备 。 


JavaScript 是 脚本 语言 


JavaScript 是 一 种 轻 量 级 的 编程 语言 。 


JavaScript 是 可 插入 HTML 页 面 的 编程 代码 。 


JavaScript 插入 HTML 页 面 后 ， 可 由 所 有 的 现代 浏览 器 执行 。 


JavaScript 很 容易 学 习 。 

您 将 学 到 什么 

下 面 是 您 将 在 本 教程 中 学 到 的 主要 内 容 。 
JavaScript : SA HTML 输出 


实例 


document .write("<h1i>This is a heading</h1i>"); 
document .write("<p>This is a paragraph</p>"); 


平板 电脑 和 智能 手 


提示 : 您 只 能 在 HTML 输出 中 使 用 document.write。 如 果 您 在 文档 加 载 后 使 用 该 方法 ， 会 履 


盖 整 个 文档 。 


JavaScript : 对 事件 作出 反应 


实例 


<button type="button" onclick="alert('Welcome!')"> 点 击 这 里 </button> 


alert() 函数 在 JavaScript 中 并 不 常用 ， 但 它 对 于 代码 测试 非常 方便 。 


onclick 事件 只 是 您 即将 在 本 教程 中 学 到 的 众多 事件 之 一 。 


JavaScript : 改变 HTML AR 
使 用 JavaScript 来 处 理 HTML 内 容 是 非常 强大 的 功能 。 
实例 


x=document.getElementById("demo") // 查 找 元 素 
x.innerHTML="Hello JavaScript"; // 改 变 内 容 


您 会 经 常 看 到 document.getElementBylD("some iq")。 这 个 方法 是 HTML DOM 中 定义 的 。 
DOM (文档 对 象 模型 ) 是 用 以 访问 HTML 元 素 的 正式 W3C 标准 。 

您 将 在 本 教程 的 多 个 章节 中 学 到 有 关 HTML DOM 的 知识 。 

JavaScript : 改变 HTML 图 像 

本 例会 动态 地 改变 HTML <image> 的 来 源 (src) : 

The Light bulb 

点 击 灯泡 就 可 以 打开 或 关闭 这 务 灯 

JavaScript 能 够 改变 任意 HTML 元 素 的 大 多 数 属 性 ， 而 不 仅仅 是 图 片 。 
JavaScript : 改变 HTML 样式 

改变 HTML 元 素 的 样式 ， 属 于 改变 HTML 属性 的 变种 。 


实例 


x=document.getElementById("demo") // 找 到 元 素 
x.style.color="#ff0000"; // 改 变样 式 


JavaScript : 验证 输入 


JavaScript 常用 于 验证 用 户 的 输入 。 


实例 


if isNaN(x) falert("Not Numeric")}; 


您 知道 吗 ? 

提示 : JavaScript 与 Java 是 两 种 完全 不 同 的 语言 ， 无 论 在 概念 还 是 设计 上 。 
Java (由 Sun 发 明 ) 是 更 复杂 的 编程 语言 。 

ECMA-262 是 JavaScript 标准 的 官方 名 称 。 


JavaScript 由 Brendan Eich 发 明 。 它 于 1995 年 出 现在 Netscape 中 (该 浏览 器 已 停止 更 
新 ) ， 并 于 1997 F ECMA (一 个 标准 协会 ) 采纳 。 
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JavaScript 使 用 


HTML 中 的 脚本 必须 位 于 <script> 与 </script> 标签 之 间 。 


脚本 可 被 放置 在 HTML 页 面 的 <body> 和 <head> 部 分 中 。 


JavaScript 输出 


JavaScript 通常 用 于 操作 HTML 元 素 。 


操作 HTML 元 素 


如 需 从 JavaScript 访问 某 个 HTML 元 素 ， 您 可 以 使 用 document.getElementByld(id) Aik. 


请 使 用 "id" 属性 来 标识 HTML 元 素 : 


例子 
通过 指定 的 id 来 访问 HTML 元 素 ， 并 改变 其 内 容 : 


<!DOCTYPE html> 

<html> 

<body> 

<hi>My First Web Page</h1i> 

<p id="demo">My First Paragraph</p> 

<script> 

document .getElementById("demo").innerHTML="My First JavaScript"; ~ 


</script> 


</body> 
</html> 


JavaScript 由 web 浏览 器 来 执行 。 在 这 种 情况 下 ， 浏 览 器 将 访问 id="demo" 的 HTML 元 素 ， 
并 把 它 的 内 容 (innerHTML) 蔡 换 为 "My First JavaScript". 


写 到 文档 输出 
下 面 的 例子 直接 把 <p> TREA HTML 文档 输出 中 : 


实例 


<!DOCTYPE html> 
<html> 
<body> 


<hi>My First Web Page</h1i> 
<script> 
document .write("<p>My First JavaScript</p>");~ 


</script> 


</body> 
</html> 


Ig 
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请 使 用 document.write() 仅仅 向 文档 输出 写 内 容 。 
如 果 在 文档 已 完成 加 载 后 执行 document.write, ZS HTML 页 面料 被 覆盖 : 


实例 


<!DOCTYPE html> 

<html> 

<body> 

<hi>My First Web Page</h1i> 
<p>My First Paragraph.</p> 


<button onclick="myFunction()"> 点 击 这 里 </button> 


<script> 
function myFunction() 


{ 
document .write( "糟糕 ! 文档 消失 了 。"); 


} 


</script> 


</body> 
</html> 


Windows 8 中 的 JavaScript 


提示 : 微软 支持 通过 JavaScript 创建 Windows 8 app. 


对 于 因特网 和 视窗 操作 系统 ，JavaScript 都 意味 着 未 来 。 


JavaScript 语句 


JavaScript 语句 


JavaScript 语句 向 浏览 器 发 出 的 命令 。 语 句 的 作用 是 告诉 浏览 器 该 做 什么 。 
下 面 的 JavaScript 语句 向 id="demo" 的 HTML 元 素 输 出 文本 "Hello World" : 


document .getElementById("demo").innerHTML="Hello World"; 


ci a 
DA 
分 号 用 于 分 隔 JavaScript 语句 。 
通常 我 们 在 每 条 可 执行 的 语句 结尾 添加 分 号 。 
使 用 分 号 的 另 一 用 义 是 在 一 行 中 编写 多 条 语句 。 
提示 : 您 也 可 能 看 到 不 带 有 分 号 的 案例 。 


在 JavaScript 中 ， 用 分 号 来 结束 语句 是 可 选 的 。 


JavaScript 代码 

JavaScript 代码 (或 者 只 有 JavaScript) 是 JavaScript 语句 的 序列 。 
浏览 器 会 按照 编写 顺序 来 执行 每 条 语句 。 

本 例 将 操作 两 个 HTML 元 素 : 


实例 


document .getElementById("demo").innerHTML="Hello World"; 
document .getElementById("myDIV").innerHTML="How are you?"; 


JavaScript 代码 块 


JavaScript 语句 通过 代码 块 的 形式 进行 组 合 。 


块 由 左 花 括号 开始 ， 由 右 花 括号 结束 。 


块 的 作用 是 使 语句 序列 一 起 执行 。 
JavaScript 函数 是 将 语句 组 合 在 块 中 的 典型 例子 。 
下 面 的 例子 将 运行 可 操作 两 个 HTML 元 素 的 函数 : 


实例 


function myFunction() 


document. getElementById("demo").innerHTML="Hello World"; 
document. getElementById("myDIV").innerHTML="How are you?"; 


CHER SNS i FEES AKKAN. 


JavaScript 对 大 小 写 敏 感 。 


JavaScript 对 大 小 写 是 敏感 的 。 
当 编 写 JavaScript 语句 时 ， 请 留意 是 否 关 闭 大 小 写 切 换 键 。 
函数 getElementByld 4 getElementbyID 是 不 同 的 。 


E2, % Æ myVariable 与 MyVariable 也 是 不 同 的 。 


空格 


JavaScript 会 忽略 多 余 的 空格 。 您 可 以 向 脚本 添加 空格 ， 来 提高 其 可 读 性 。 下 面 的 两 行 代 码 
是 等 效 的 : 


var name="Hello"; 
var name = "Hello"; 


对 代码 行进 行 折 行 
您 可 以 在 文本 字符 串 中 使 用 反 斜 杠 对 代码 行进 行 换 行 。 下 面 的 例子 会 正确 地 显示 : 


document.write("Hello \ 
World!"); 


不 过 ， 您 不 能 像 这 样 折 行 : 


document.write \ 
("Hello World!"); 


您 知道 吗 ? 


提示 : JavaScript 是 脚本 语言 。 浏 览 器 会 在 读 取代 码 时 ， 
编程 来 说 ， 会 在 执行 前 对 所 有 代码 进行 编译 。 
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逐 行 地 执行 脚本 代码 。 而 对 于 传统 


JavaScript 注释 
JavaScript 注释 可 用 于 提高 代码 的 可 读 性 。 


JavaScript 注释 
JavaScript 不 会 执行 注释 。 
我 们 可 以 添加 注释 来 对 JavaScript 进行 解释 ， 或 者 提高 代码 的 可 读 性 。 


单行 注释 以 // 开头 。 
例子 
下 面 的 例子 使 用 单行 注释 来 解释 代码 : 


// 输出 标题 : 

document .getElementById("myH1").innerHTML="Welcome to my Homepage"; 

// 输出 段落 : 

document .getElementById("myP").innerHTML="This is my first paragraph."; 


JavaScript 多 行 注释 
多 行 注 释 以 / 开始 ， 以 / 结尾 。 


下 面 的 例子 使 用 多 行 注释 来 解释 代码 : 


例子 


ffx 
下 面 的 这 些 代 码 会 输出 
一 个 标题 和 一 个 段落 


并 将 代表 主页 的 开始 
aA 


document .getElementById("myH1").innerHTML="welcome to my Homepage"; 
document .getElementById("myP").innerHTML="This is my first paragraph."; 


使 用 注释 来 阻止 执行 
例子 1 


在 下 面 的 例子 中 ， 注 释 用 于 阻止 其 中 一 条 代码 行 的 执行 (可 用 于 调试 ) 


//document .getElementById("myH1i").innerHTML="Welcome to my Homepage"; 
document.getElementById("myP").innerHTML="This is my first paragraph."; 


例子 2 
在 下 面 的 例子 中 ， 注 释 用 于 阻止 代码 块 的 执行 (可 用 于 调试) 


document getElementById("myH1").innerHTML="Welcome to my Homepage"; 


document.getElementById("myP").innerHTML="This is my first paragraph."; 
ah 


在 行 末 使 用 注释 
在 下 面 的 例子 中 ， 我 们 把 注释 放 到 代码 行 的 结尾 处 : 


例子 


var x=5; // 声明 x 并 把 5 赋值 给 它 
var y=x+2; // 声明 y 并 把 x+2 赋值 给 它 
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JavaScript == 


在 代数 中 ， 我 们 使 用 字母 (比如 x) 来 保存 值 (比如 2) 。 
通过 上 面 的 表达 式 z=x+y， 我 们 能 够 计算 出 z 的 值 为 5。 
在 JavaScript 中 ， 这 些 字母 被 称 为 变量 。 


提示 : 您 可 以 把 变量 看 做 存储 数据 的 容器 。 


JavaScript = = 


与 代数 一 样 ，JavaScript 变量 可 用 于 存放 值 (比如 x=2) 和 表达 式 (比如 z=xty) 。 
变量 可 以 使 用 短 名 称 (比如 x Aly) ， 也 可 以 使 用 描述 性 更 好 的 名 称 (比如 age, sum, 


totalvolume) 。 


。 变量 必须 以 字母 开头 
。 变量 也 能 以 $ 和 _ 符号 开头 (不 过 我 们 不 推荐 这 么 做 ) 
。 变量 名 称 对 大 小 写 敏 感 (y 和 Y 是 不 同 的 变量 ) 


提示 : JavaScript 语句 和 JavaScript 交 量 都 对 大 小 写 敏感 。 


JavaScript 数据 类 型 


JavaScript 变量 还 能 保存 其 他 数据 类 型 ， 比 如 文本 值 (name="Bill Gates")。 


在 JavaScript 中 ， 类 似 "Bill Gates" 这 样 一 条 文本 被 称 为 字符 串 。 
JavaScript 变量 有 很 多 种 类 型 ， 但 是 现在 ， 我 们 只 关注 数字 和 字符 串 。 
当 您 向 变量 分 配 文本 值 时 ， 应 该 用 双 引 号 或 单 引 号 包围 这 个 值 。 


当 您 向 变量 赋 的 值 是 数值 时 ， 不 要 使 用 引号 。 如 果 您 用 引号 包围 数值 ， 该 值 会 被 作为 文本 来 
人 处理。 


Pll =F 


var pi=3.14; 
var name="Bill Gates"; 
var answer='Yes I am!'; 


声明 (创建 ) JavaScript 变量 


在 JavaScript 中 创建 变量 通常 称 为 “声明 "变量 。 
我 们 使 用 var 关键 词 来 声明 变量 : 


var carname; 

变量 声明 之 后 ， 该 变量 是 空 的 〈 它 没有 值 ) 。 

如 需 向 变量 赋值 ， 请 使 用 等 号 : 
carname="Volvo"; 


不 过 ， 您 也 可 以 在 声明 变量 时 对 其 赋值 : 


var carname="Volvo"; 


ll =F 


在 下 面 的 例子 中 ， 我 们 创建 了 名 为 carname 的 变量 ， 并 向 其 赋值 "Volvo"， 然 后 把 它 放 入 
id="demo" 的 HTML 段落 中 : 


<p id="demo"></p> 
var carname="Volvo"; 
document .getElementById("demo") .innerHTML=carname; 


提示 : 一 个 好 的 编程 习惯 是 ， 在 代码 开始 处 ， 统 一 对 需要 的 变量 进行 声明 。 


` ~“ EE 
一 条 语句 ， 多 个 变量 
您 可 以 在 一 条 语句 中 声明 很 多 变量 。 该 语句 以 var 开头 ， 并 使 用 逗号 分 隅 变量 即 可 : 
var name="Gates", age=56, job="CEO"; 
声明 也 可 横 跨 多 行 : 


var name="Gates", 
age=56, 
job="CEO"; 


Value = undefined 


在 计算 机 程序 中 ， 经 常会 声明 无 值 的 变量 。 未 使 用 值 来 声明 的 变量 ， 其 值 实 际 上 是 
undefined。 


在 执行 过 以 下 语 名 后， 变量 carname 的 值 将 是 undefined : 


var Carname, 


重新 声明 JavaScript <= 


如 果 重 新 声明 JavaScript 变量 ， 该 变量 的 值 不 会 丢失 : 


在 以 下 两 条 语句 执行 后 ， 变 量 carname 的 值 依 然 是 "Volvo" : 


var carname="Volvo"; 
var carname; 


JavaScript 算数 


您 可 以 通过 JavaScript 变量 来 做 算数 ， 使 用 的 是 = 和 + 这 类 运算 符 : 


您 将 在 本 教程 稍 后 的 章节 学 到 更 多 有 关 JavaScript 运算 符 的 知识 。 
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ECMAScript 语法 、 ECMAScript 变量 
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JavaScript 数据 类 型 


字符 串 、 数 字 、 布 尔 、 数 组 、 对 象 、Null、Undefined 


JavaScript 拥有 动态 类 型 


JavaScript 拥有 动态 类 型 。 这 意味 着 相同 的 变量 可 用 作 不 同 的 类 型 : 


Ry? 

实例 
Var X // x 为 undefined 
var x = 6; // x 为 数字 
var x = "Bill"; // x 为 字符 串 


JavaScript 字符 串 


字符 串 是 存储 字符 (比如 "Bill Gates") 的 变量 。 
字符 串 可 以 是 引号 中 的 任意 文本 。 您 可 以 使 用 单 引 号 或 双 引 号 : 


实例 


var carname="Bill Gates"; 
var carname='Bill Gates'; 


您 可 以 在 字符 串 中 使 用 引号 ， 只 要 不 匹配 包围 字符 串 的 引号 即 可 : 


实例 


var answer="Nice to meet you!"; 
var answer="He is called 'Bill'"; 
var answer='He is called "Bill"'; 


您 将 在 本 教程 的 高 级 部 分 学 到 更 多 关于 字符 串 的 知识 。 


JavaScript 数字 


JavaScript 只 有 一 种 数字 类 型 。 数 字 可 以 带 小 数 点 ， 也 可 以 不 带 : 


实例 


var x1=34.00; // 使 用 小 数 点 来 写 
var x2=34; // 不 使 用 小 数 点 来 写 


极 大 或 极 小 的 数字 可 以 通过 科学 (指数 ) 计数 法 来 书写 : 


R> 

实例 
var y=123e5; // 12300000 
var z=123e-5; // 0.00123 


您 将 在 本 教程 的 高 级 部 分 学 到 更 多 关于 数字 的 知识 。 


JavaScript 布尔 
布尔 (逻辑 ) 只 能 有 两 个 值 : true 或 false. 


var x=true 
var y=false 


布尔 常用 在 条 件 测试 中 。 您 将 在 本 教程 各 后 的 章节 中 学 到 更 多 关于 条 件 测试 的 知识 。 


JavaScript 数组 
下 面 的 代码 创建 名 为 cars 的 数组 : 


var cars=new Array(); 
cars[0]="Audi"; 
cars[1]="BMw"; 
cars[2]="Volvo"; 


3% (condensed array): 


var cars=new Array("Audi", "BMW", "Volvo"); 
或 者 (literal array): 


实例 


var cars=["Audi", "BMW","Volvo"]; 


数组 下 标 是 基于 震 的 ， 所 以 第 一 个 项 目 是 [0]， 第 二 个 是 [1]， 以 此 类 推 。 
您 特 在 本 教程 稍 后 的 章节 中 学 到 更 多 关于 数组 的 知识 。 


JavaScript 对 象 


对 象 由 花 括 号 分 隔 。 在 括号 内 部 ， 对 象 的 属性 以 名 称 和 值 对 的 形式 (name : value) 来 定义 。 
属性 由 逗号 分 隔 : 


var person={firstname:"Bill", lastname:"Gates", id:5566}; 
上 面 例子 中 的 对 象 (person) 有 三 个 属性 : firstname, lastname LAR id. 
空格 和 折 行 无 关 紧 要 。 声 明 可 横 跨 多 行 : 


var person={ 
firstname : "Bill", 


lastname : "Gates", 

id : 5566 

}; 
对 象 属性 有 两 种 寻 址 方式 : 
实例 


name=person. lastname; 
name=person["lastname"]; 


您 特 在 本 教程 稍 后 的 章节 中 学 到 更 多 关于 对 象 的 知识 。 


Undefined 和 Null 


Undefined 这 个 值 表 


it 
部 
+ 
吵 
att 
n 


可 以 通过 将 变量 的 值 设 置 为 null 来 清空 变量 。 


实例 


cars=null; 
person=null; 


声明 变量 类 型 


+ 


当 您 声明 新 变量 时 ， 可 以 使 用 关键 词 "new" 来 声明 其 类 型 : 


var carname=new String; 


var x= new Number; 
var y= new Boolean; 
var cars= new Array; 


var person= new Object; 


JavaScript 变量 均 为 对 象 。 当 您 声明 一 个 变量 时 ， 就 创建 了 一 个 新 的 对 象 。 


课外 阅读 


JavaScript 高 级 教程 : 


JavaScript 对 象 


JavaScript 中 的 所 有 事物 都 是 对 象 : 字符 串 、 数 字 、 数 组 、 日 期 ， 等 等 。 
在 JavaScript 中 ， 对 象 是 拥有 属性 和 方法 的 数据 。 


属性 和 方法 
属性 是 与 对 象 相关 的 值 。 
方法 是 能 够 在 对 象 上 执行 的 动作 。 
举例 : 汽车 就 是 现实 生活 中 的 对 象 。 
汽车 的 属性 : 

car .name=Fiat 

car .mode1=500 


car .weight=850kg 


car.color=white 


汽车 的 方法 : 


car.start() 
car.drive() 


car.brake() 


汽车 的 属性 包括 名 称 、 型 号 、 重 量 、 颜 色 等 。 

所 有 汽车 都 有 这 些 属性 ， 但 是 每 款 车 的 属性 都 不 尽 相同 。 

汽车 的 方法 可 以 是 启动 、 驾 驶 、 刹 车 等 。 

所 有 汽车 都 拥有 这 些 方法 ， 但 是 它们 被 执行 的 时 间 都 不 尽 相同 。 


JavaScript 中 的 对 象 


在 JavaScript 中 ， 对 象 是 数据 (变量 ) ， 拥 有 属性 和 方法 。 


当 您 像 这 样 声明 一 个 JavaScript 变量 时 : 


var txt = "Hello"; 
您 实际 上 已 经 创建 了 一 个 JavaScript 字符 串 对 象 。 字 符 串 对 象 拥有 内 建 的 属性 length 对 于 
上 面 的 字符 捉 来 说 ，length 的 值 是 5。 字 符 串 对 象 同 时 拥有 若干 个 内 建 的 方法 。 
属性 : 


txt.length=5 


txt. indexOf() 
txt.replace() 


txt.search() 


提示 : 在 面向 对 象 的 语言 中 ， 属 性 和 方法 常 被 称 为 对 象 的 成 员 。 
在 本 教程 稍 后 的 章节 中 ， 您 将 学 到 有 关 字 符 串 对 象 的 更 多 属性 和 方法 。 


创建 JavaScript 对 象 

JavaScript 中 的 几乎 所 有 事务 都 是 对 象 : FAB. MS. Bee, AH. WH, SS. 
你 也 可 以 创建 自己 的 对 象 。 

本 例 创建 名 为 "person" 的 对 象 ， 并 为 其 添加 了 四 个 属性 : 


实例 


person=new Object(); 
person. firstname="Bill"; 
person. lastname="Gates"; 
person.age=56; 
person.eyecolor="blue"; 


创建 新 JavaScript 对 象 有 很 多 不 同 的 方法 ， 并 且 您 还 可 以 向 已 存在 的 对 象 添加 属性 和 方法 。 
您 将 在 本 教程 积 后 的 章节 学 到 更 多 相关 的 内 容 。 


访问 对 象 的 属性 


访问 对 象 属性 的 语法 是 : 


_objectName_._propertyName_ 


本 例 使 用 String 对 象 的 length 属性 来 查找 字符 串 的 长 度 : 


var message="Hello World!"; 
var x=message.length; 


在 以 上 代码 执行 后 ，x 的 值 是 : 
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访问 对 象 的 方法 
您 可 以 通过 下 面 的 语法 调用 方法 : 
_objectName_._methodName__( ) 


这 个 例子 使 用 String 对 象 的 toUpperCase() 方法 来 把 文本 转换 为 大 写 : 


var message="Hello world!"; 
var x=message.toUpperCase(); 


在 以 上 代码 执行 后 ，x 的 值 是 : 


HELLO WORLD! 


您 知道 吗 ? 


提示 : 在 面向 对 象 的 语言 中 ， 使 用 camel-case 标记 法 的 函数 是 很 常见 的 。 您 会 经 常 看 到 
someMethod() 这 样 的 函数 名 ， 而 不 是 some_method(). 


RAB 

如 需 更 多 有 关 JavaScript 对 象 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 
ECMAScript 面向 对 象 技术 

本 节 简 要 介绍 了 面向 对 象 技术 的 术语 、 面 向 对 象 语 言 的 要 求 以 及 对 象 的 构成 。 


ECMAScript 对 象 应 用 


本 节 讲 解 了 如 何 声明 和 实例 化 对 象 ， 如 何 引 用 和 废除 对 象 ， 以 及 绑 定 的 概念 。 
ECMAScript 对 象 类 型 


本 节 介绍 了 ECMAScript 的 三 种 类 型 : 本 地 对 象 、 内 置 对 象 和 宿主 对 象 ， 并 提供 了 指向 相关 
参考 手册 的 链接 。 


ECMAScript 对 象 作用 域 

本 节 讲 解 了 ECMAScript 作用 域 以 及 this 关键 字 。 
ECMAScript 定义 类 或 对 象 

本 节 详 细 讲 解 了 创建 ECMAScript 对 象 或 类 的 各 种 方式 。 
ECMAScript 修改 对 象 


本 节 讲 解 了 如 何 通过 创建 新 方法 或 重 定义 已 有 方法 来 修改 对 象 。 


JavaScript WA 


KA re FS 4 oh BS A a FB TB BS ABN Ro 


例 


将 


<!DOCTYPE html> 

<html> 

<head> 

<script> 

function myFunction() 
{ 

alert("Hello World!"); 
} 


</script> 
</head> 


<body> 
<button onclick="myFunction()">m# ix #</button> 
</body> 
</html> 


JavaScript KŽUZ A 
RAE ORES PHR, MEEA 7 hs function : 


function functionname() 


{ 
这 里 是 要 执行 的 代码 


当 调用 该 本 数 时 ， 会 执行 函数 内 的 代码 。 


可 以 在 某 事件 发 生 时 直接 调用 函数 (上 比如 当 用 户 点 击 按钮 时 )  ， 并 且 可 由 JavaScript 在 任何 
位 置 进行 调用 。 


提示 : JavaScript 对 大 小 写 敏 感 。 关 键 词 function 必须 是 小 写 的 ， 并 且 必 须 以 与 画 数 名 称 相 
HADER AAK 


AA FSR WA 


在 调用 函数 时 ， 您 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 
这 些 参数 可 以 在 函数 中 使 用 。 


您 可 以 发 送 任意 多 的 参数 ， 由 去 号 (,) 分 隔 : 


myFunction(_argument1_,_argument2_) 


当 您 声明 函数 时 ， 请 把 参数 作为 变量 来 声明 : 


function myFunction( var1 ，Vvar2 ) 


{ 
这 里 是 要 执行 的 代码 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 的 值 ， 以 此 
类 推 。 


实例 


<button onclick="myFunction('Bill Gates'，'CE0' )"> 点 击 这 里 </button> 


<script> 
function myFunction(name, job) 


alert("Welcome " + ‘name + ", the " + job ); 
} 


</script> 


上 面 的 函数 会 当 按 和 纽 被 点 击 时 提示 "Welcome Bill Gates, the CEO". 


画 数 很 灵活 ， 您 可 以 使 用 不 同 的 参数 来 调用 该 丽 数 ， 这 样 就 会 给 出 不 同 的 消息 : 
实例 


<button onclick="myFunction('Harry Potter', 'Wizard')"> 点 击 这 里 </button> 
<button onclick="myFunction('Bob', 'Builder')">m#ix #</button> 


根据 您 点 击 的 不 同 的 按钮 ， 上 面 的 例子 会 提示 "Welcome Harry Potter, the Wizard" 或 
"Welcome Bob, the Builder 。 


带 有 返回 值 的 琅 数 


有 时 ， 我 们 会 希望 画 数 将 值 返回 调用 它 的 地 方 。 
过 使 用 return 语句 就 可 以 实现 。 
在 使 用 return 语句 时 ， 画 数 会 停止 执行 ， 并 返回 指定 的 值 。 


吾 法 


function myFunction() 


var x=5; 
*return x;- 


} 


上 面 的 汞 数 会 返回 值 5。 


注释 : 整个 JavaScript 并 不 会 停止 执行 ， 人 久 仅 是 范 数 。JavaScript 将 继续 执行 代码 ， 从 调用 
函数 的 地 方 。 


a LARISA EN : 


var myVar=myFunction(); 


myVar Bac 5, hee "myFunction()" 所 返回 的 值 。 
即使 不 把 它 保 存 为 变量 ， 您 也 可 以 使 用 返回 值 : 


document getElementById("demo") .innerHTML=myFunction(); 


"demo" 303489 innerHTML 43% 5, tote "myFunction()" 所 返回 的 值 。 
您 可 以 使 返回 值 基于 传递 到 函数 中 的 参数 : 


实例 
计算 两 个 数字 的 乘积 ， 并 返回 结果 : 


function myFunction(a,b) 


return a*b; 


} 


document .getElementById("demo").innerHTML=myFunction(4,3); 


"demo" 元 素 的 innerHTML 将 是 : 
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在 您 仅仅 希望 退出 函数 时 ， 也 可 使 用 return 语句 。 可 选 的 : 


function myFunction(a,b) 
{ 
if (a>b) 


return; 


} 


x=a+b 


} 


如 果 a 大 于 b， 则 上 面 的 代码 将 退出 画 数 ， 并 不 会 计算 a 和 b 的 总 和 。 


局 部 JavaScript 交 量 


在 JavaScript 函数 内 部 声明 的 变量 (使 用 var) 是 局 部 变量 ， 所 以 只 能 在 函数 内 部 访问 它 。 
(该 变量 的 作用 域 是 局 部 的 ) 。 


您 可 以 在 不 同 的 画 数 中 使 用 名 称 相同 的 局 部 变量 ， 因 为 只 有 声明 过 该 变量 的 函数 才能 识别 出 


该 变量 。 
只 要 丽 数 运行 完 毕 ， 本 地 变量 就 会 被 别 除 。 
全 局 JavaScript 变量 


在 沙 数 外 声明 的 变量 是 全 局 变量 ， 网 页 上 的 所 有 脚本 和 男 数 都 能 访问 它 。 


JavaScript 变量 的 生存 期 
JavaScript 变量 的 生命 期 从 它们 被 声明 的 时 间 开 始 。 
SMe BREA SUGAR. 

全 局 变量 会 在 页 面 关闭 后 被 删除 。 





向 未 声明 的 JavaScript 变量 来 分 配 值 
如 果 您 把 值 赋 给 尚未 声明 的 变量 ， 该 变量 将 被 自动 作为 全 局 变量 声明 。 
这 条 语句 : 


carname="Volvo"; 


将 声明 一 个 全 局 变量 carname， 即 使 它 在 函数 内 执行 。 


课外 书 

如 需 更 多 有 关 JavaScript 函数 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 
ECMAScript 函数 概述 

AG HRA, ECMAScript 如 何 声 明 并 调用 函数 ， 以 及 男 数 如 何 返 回 值 。 
ECMAScript arguments 对 象 


本 节 介 绍 了 此 对 象 的 基本 用 法 ， 然 后 讲解 了 如 何 使 用 length 属性 来 测定 函数 的 参数 数目 ， 以 
及 模拟 范 数 重 载 。 


ECMAScript Function 对 象 (类 ) 
本 节 讲 解 了 如 何 使 用 Function 类 创建 画 数 ， 然 后 介绍 了 Function 对 象 的 属性 和 方法 。 
ECMAScript 闭 包 (closure) 


本 节 讲 解 了 闭 包 (closure) 的 概念 ， 并 分 别 为 您 展示 了 简单 和 稍 复杂 的 两 个 闭 包 实例 。 


JavaScript 运算 符 


运算 符 = 用 于 赋值 。 

运算 符 + 用 于 加 值 。 

运算 符 = 用 于 给 JavaScript 变量 赋值 。 
算术 运算 符 + 用 于 把 值 加 起 来 。 


$ 
了 


xNX< 
Wout al 


5 
2 
ytz; 


在 以 上 语句 执行 后 ，x 的 值 是 7。 


JavaScript 算术 运算 符 


算术 运算 符 用 于 执行 变量 与 /或 值 之 间 的 算术 运算 。 
给 定 y=5， 下 面 的 表格 解释 了 这 些 算术 运算 符 : 


运算 符 描述 例子 结果 
+ 加 x=y+2 x=7 
成 x=y-2 x=3 
i 乘 X=y*2 x=10 
/ 除 x=y/2 X=245 
% 求 余数 (保留 整数 ) X=y%2 x=1 
tt SAM X=++y x=6 
递减 a: iis 


JavaScript 赋值 运算 符 


赋值 运算 符 用 于 给 JavaScript 变量 赋值 。 
给 定 X=10 和 y=5， 下 面 的 表格 解释 了 赋值 运算 符 : 


运算 符 例子 等 价 于 结果 


= X=y x=5 
ie x+=y X=xty x=15 
-= X-=y X=X-y X=5 
*= x*=y X=X*y x=50 
/= X/=y X=X/y x=2 
%= X%=y X=x%y x=0 


用 于 字符 串 的 + 运算 符 
。 运算 符 用 于 把 文本 值 或 字符 串 变 量 加 起 来 (连接 起 来 ) 。 
如 需 把 两 个 或 多 个 字符 申 亦 量 连 接 起 来 ， 请 使 用 + 运算 符 。 


txt1i="What a very"; 
txt2="nice day"; 
txt3=txt1+txt2; 


在 以 上 语句 执行 后 ， 变 量 txt3 包含 的 值 是 "What a verynice day", 
要 想 在 两 个 字符 串 之 间 增 加 空格 ， 需 要 把 空格 插入 一 个 字符 串 之 中 : 


txt1="What a very " 
txt2="nice day"; 
txt3=txtit+txt2; 


或 者 把 空格 插入 表达 式 中 : 


txt1i="What a very"; 
txt2="nice day"; 
txt3=txti+" "+txt2; 


在 以 上 语句 执行 后 ， 变 量 txt3 包含 的 值 是 : 


"What a very nice day" 


对 字符 串 和 数字 进行 加 法 运算 


x=5+5; 
document .write(x); 


SU Site 
document .write(x); 


X— 5 Su 
document .write(x); 


XS 
document .write(x); 


TIY 


规则 是 : 


如 果 把 数字 与 字符 串 相 加 ， 结 果 将 成 为 字符 串 。 


课外 书 
如 需 更 多 有 关 JavaScript 运算 符 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 
ECMAScript 一 元 运算 符 


一 元 运算 符 只 有 一 个 参数 ， 即 要 操作 的 对 象 或 值 。 本 节 讲 解 ECMAScript 中 最 简单 的 运算 符 - 
一 元 运算 符 。 


ECMAScript 位 运算 符 


位 运算 符 是 在 数字 底层 进行 操作 的 。 本 节 深 入 讲解 了 有 关 整 数 的 知识 ， 并 介绍 了 ECMAScript 
的 各 种 位 运算 符 。 


ECMAScript Boolean 运算 符 

Boolean 运算 符 非常 重要 。 本 节 深 入 讲解 三 种 Boolean 运算 符 : NOT, AND 和 OR, 
ECMAScript 乘 性 运算 符 

本 节 讲 解 ECMAScript 的 乘 性 运算 符 : 乘法 、 除 法 、 取 模 运 算 符 ， 以 及 它们 的 特殊 行为 。 
ECMAScript 加 性 运算 符 

本 节 讲 解 ECMAScript 的 加 性 运算 符 : 加 法 、 减 法 运算 符 ， 以 及 它们 的 特殊 行为 。 
ECMAScript 关系 运算 符 


关系 运算 符 执行 的 是 比较 运算 。 本 节 讲 解 关系 运算 符 的 常规 比较 方式 ， 以 及 如 何 比较 字符 串 
与 数字 。 


ECMAScript 等 性 运算 符 


等 性 运算 符 用 于 判断 变量 是 否 相 等 。ECMAScript 提供 两 套 等 性 运算 符 : 等 号 和 非 等 号 ， 以 及 
全 等 号 和 非 全 等 号 。 


ECMAScript 条 件 运算 符 

本 节 讲 解 ECMAScript 中 的 条 件 运 算 符 。 
ECMAScript 赋值 运算 符 

本 节 讲 解 ECMAScript 中 的 赋值 运算 符 。 
ECMAScript 逗号 运算 符 符 


本 节 讲 解 ECMAScript 中 的 逗号 运算 符 。 


JavaScript 比较 和 逻辑 运算 符 
比较 和 逮 辑 运算 符 用 于 测试 true 或 false, 


比较 运算 符 


比较 运算 符 在 逻辑 语句 中 使 用 ， 以 测定 变量 或 值 是 否 相 等 。 
给 定 x=5， 下 面 的 表格 解释 了 上 比较 运算 符 : 


运算 符 描述 例子 

== 等 于 x==8 为 false 

=== 全 等 〈 值 和 类 型 ) x===5 为 true ; x==="5" 为 false 
I= 不 等 于 x!=8 为 true 

> 大 手 X>8 为 false 

< 小 于 X<8 为 true 

>= 大 于 或 等 于 x>=8 为 false 

<= 小 于 或 等 于 x<=8 为 true 


如 何 使 用 
可 以 在 条 件 语句 中 使 用 比较 运算 符 对 值 进行 比较 ， 然 后 根据 结果 来 采取 行动 : 


if (age<18) document.write("Too young"); 


您 将 在 本 教程 的 下 一 节 中 学 习 更 多 有 关 条 件 语句 的 知识 。 


逻辑 运算 符 
逻辑 运算 符 用 于 测定 变量 或 值 之 间 的 逻辑 。 
给 定 x=6 以 及 y=3， 下 表 解 释 了 远 辑 运算 符 : 


运算 符 描述 例子 


&& and (x < 10 && y > 1) # true 
&124;&124; or (x==5 &124;&124; y==5) 为 false 
! not !(x==y) 为 true 


条 件 运 算 符 
JavaScript 还 包含 了 基于 某 些 条 件 对 变量 进行 赋值 的 条 件 运算 符 。 
语法 

variablename=(condition)?value1:value2 


例子 


greeting=(visitor=="PRES")?"Dear President ":"Dear "; 


如 果 变 量 visitor 中 的 值 是 "PRES"， 则 向 变量 greeting 赋值 "Dear President", Am wa 
"Dear", 


JavaScript If...Else 语句 


条 件 语句 用 于 基于 不 同 的 条 件 来 执行 不 同 的 动作 。 


条 件 语句 

通常 在 写 代 码 时 ， 您 总 是 需要 为 不 同 的 决定 来 执行 不 同 的 动作 。 您 可 以 在 代码 中 使 用 条 件 语 
句 来 完成 该 任务 。 

在 JavaScript 中 ， 我 们 可 使 用 以 下 条 件 语句 : 


。 六 语句 - 只 有 当 指 定 条 件 为 true 时 ， 使 用 该 语句 来 执行 代码 

e if.. else 语句 - 当 条 件 为 true 时 执行 代码 ， 当 条 件 为 false 时 执行 其 他 代码 
e if...else if....else 语句 - 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 

© switch 语句 - 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 


If 语句 
只 有 当 指 定 条 件 为 true 时 ， 该 语句 才 会 执行 代码 。 
语法 


if (条 件 ) 


有 当 条 件 为 true 时 执行 的 代码 


Ww yc 


注意 : 请 使 用 小 宇 的 if。 使 用 大 写字 母 (IF) SEM JavaScript 错误 ! 
实例 
当时 间 小 于 20:00 时 ， 生 成 一 个 “Good day” 问 候 : 

if (time<20) 


x="Good day"; 


x 的 结果 是 : 


<script>var d=new Date(); 
var time=d.getHours(); 
if (time<20) 
{ 


document .write("Good day"); 
}</script> Good day 


请 注意 ， 在 这 个 语法 中 ， 没 有 ..else..。 您 已 经 告诉 浏览 器 只 有 在 指定 条 件 为 true 时 才 执 行 代 


If...else 语句 


请 使 用 if....else 语句 在 条 件 为 true 时 执行 代码 ， 在 条 件 为 false 时 执行 其 他 代码 。 
语法 


if (条 件 ) 
{ 
当 条 件 为 true 时 执行 的 代码 
} 


else 


{ 
当 条 件 不 为 true 时 执行 的 代码 
} 


实例 
当时 间 小 于 20:00 时 ， 将 得 到 问候 "Good day"， 否 则 将 得 到 问候 "Good evening". 


if (time<20) 
x="Good day"; 
else 


x="Good evening"; 


<script>var d=new Date(); 
var time=d.getHours(); 
if (time<20) 
document .write("Good day"); 


else 


document .write("Good evening"); 
}</script> Good day 


If...else if...else 语句 


使 用 if....else if...else 语句 来 选择 多 个 代码 块 之 一 来 执行 。 


语法 


if (条 件 1) 


{ 
当 条 件 1 为 true 时 执行 的 代码 


} 
else if (# 2) 


{ 
当 条 件 2 为 true 时 执行 的 代码 
} 


else 
{ 
GRE 1 和 RA 2 都 不 为 true 时 执行 的 代码 


实例 
如 果 时 间 小 于 10:00， 则 将 发 送 问候 "Good morning"， 否 则 如 果 时 间 小 于 20:00， 则 发 送 问候 


"Good day"， 否 则 发 送 问 候 "Good evening" : 


if (time<10) 
{ 
x="Good morning"; 
} 

else if (time<20) 


{ 
x="Good day"; 


} 


else 


{ 
x="Good evening"; 


} 


xX 的 结果 是 : 


<script>var d=new Date(); 
var time=d.getHours(); 
if (time<10) 

{ 


document .write("Good morning"); 


J 
else if (time<20) 


{ 


document .write("Good day"); 


} 


else 


{ 


document .write("Good evening"); 
}</script> Good day 


更 多 实例 
随机 的 链接 


本 例 将 输出 W3School 或 微软 公司 的 链接 。 通 过 使 用 随机 数 ， 每 个 链接 被 输出 的 机 会 为 
50%. 


课外 书 
如 需 更 多 有 关 JavaScript if 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 
ECMAScript if 语句 


if 语句 是 ECMAScript 中 最 常用 的 语句 之 一 。 本 节 为 您 详细 讲解 了 如 何 使 用 if 语句 。 


JavaScript Switch 语句 


switch 语句 用 于 基于 不 同 的 条 件 来 执行 不 同 的 动作 。 


JavaScript Switch 语句 


请 使 用 switch 语句 来 选择 要 执行 的 多 个 代码 块 之 一 。 
语法 


switch(n) 


case 1: 
执行 代码 块 1 
break; 
case 2: 
执行 代码 块 2 
break; 
default: 
n 与 case 1 和 case 2 不 同时 执行 的 代码 
} 


工作 原理 : 首先 设置 表达 式 n (通常 是 一 个 变量 ) 。 随 后 表达 式 的 值 会 与 结构 中 的 每 个 case 
的 值 做 比较 。 如 果 存 在 匹配 ， 则 与 该 case 关联 的 代码 块 会 被 执行 。 请 使 用 break 来 阻止 代码 
自动 地 向 下 一 个 case 运行 。 


实例 


显示 今日 的 周 名 称 。 请 注意 Sunday=0, Monday=1, Tuesday=2, 等 等 : 


var day=new Date().getDay(); 
switch (day) 


case 0: 
x="Today 
break; 

case 1: 
x="Today 
break; 

case 2: 
x="Today 
break; 

case 3: 
x="Today 
break; 

case 4: 
x="Today 
break; 

case 5: 
x="Today 
break; 

case 6: 
x="Today 
break; 


} 


TS 


it's 


it's 


it's 


it's 


it's 


TES 


Sunday"; 


Monday"; 


Tuesday"; 


wednesday"; 


Thursday"; 


Friday"; 


Saturday"; 


<script>var d=new Date().getDay(); 


switch (d) 
it 
case 0: 
x="Today 
break; 
case 1: 
x="Today 
break; 
case 2: 
x="Today 
break; 
case 3: 
x="Today 
break; 
case 4: 
x="Today 
break; 
case 5: 
x="Today 
break; 
case 6: 
x="Today 
break; 
} 


it's 


it's 


ES 


it's 


it's 


it's 


TEKS 


Sunday"; 


Monday"; 


Tuesday"; 


Wednesday"; 


Thursday"; 


Friday"; 


Saturday"; 


document .write(x);</script> Today it's Tuesday 


default 关键 词 


请 使 用 default 关键 词 来 规定 匹配 不 存在 时 做 的 事情 : 


D 


实例 


如 


果 今 天 不 是 周 六 或 周 日 ， 则 会 输 出 默认 的 消息 


var day=new Date().getDay(); 
switch (day) 


case 6: 
x="Today it's Saturday"; 
break; 
case 0: 
x="Today it's Sunday"; 
break; 
‘default: 
x="Looking forward to the Weekend"; ~ 


<script>var d=new Date().getDay(); 
switch (d) 
{ 
case 6: 
x="Today it's Saturday"; 
break; 
case 0: 
x="Today it's Sunday"; 
break; 
default: 
x="Looking forward to the Weekend"; 


} 


document .write(x);</script> Looking forward to the Weekend 


课外 书 


如 需 


更 多 有 关 JavaScript Switch 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 


ECMAScript switch 语句 


switch 语句 是 if 语句 的 兄弟 语句 。 本 节 介 绍 了 switch 语句 的 用 法 ， 以 及 与 Java HAY switch 


INTA. 


JavaScript For 循环 


循环 可 以 将 代码 块 执行 指定 的 次 数 。 


JavaScript 循环 


如 果 您 希望 一 通 又 一 通 地 运行 相同 的 代码 ， 并 且 每 次 的 值 都 不 同 ， 那 么 使 用 循环 是 很 方便 


我 们 可 以 这 样 输出 数组 的 值 : 


document .write(cars[0] + "<br>"); 
document .write(cars[1] + "<br>"); 
document .write(cars[2] + "<br>"); 
document .write(cars[3] + "<br>"); 
document .write(cars[4] + "<br>"); 
document .write(cars[5] + "<br>"); 


不 过 通常 我 们 这 样 写 : 


for (var i=0;i<cars.length;i++) 


document .write(cars[i] + "<br>"); 


不 同类 型 的 循环 
JavaScript 支持 不 同类 型 的 循环 : 


。 for- 循环 代码 块 一 定 的 次 数 

。 forlin - 循环 通 历 对 象 的 属性 

e while - 当 指定 的 条 件 为 true 时 循环 指定 的 代码 块 

e do/while - 同样 当 指 定 的 条 件 为 true 时 循环 指定 的 代码 块 


For 循环 
for 循环 是 您 在 希望 创建 循环 时 常会 用 到 的 工具 。 


下 面 是 for 循环 的 语法 : 


for (语句 1; 语句 2; 语句 3) 


{ 
被 执行 的 代码 块 
} 


语句 1 在 循环 (代码 块 ) 开始 前 执行 
语句 2 定义 运行 循环 (代码 块 ) 的 条 件 


语句 3 在 循环 (代码 块 ) 已 被 执行 之 后 执行 


实例 


for (var i=0; i<5; i++) 


x=x + "The number is " + i + "<br>"; 


} 


从 上 面 的 例子 中 ， 您 可 以 看 到 : 
Statement 1 在 循环 开始 之 前 设置 变量 (var i=0)。 
Statement 2 定义 循环 运行 的 条 件 (i 必须 小 于 5) 。 


Statement 3 在 每 次 代码 块 已 被 执行 后 增加 一 个 值 (i++)。 


语句 1 

通常 我 们 会 使 用 语句 1 初始 化 循环 中 所 用 的 变量 (var i=0)。 
语句 1 是 可 选 的 ， 也 就 是 说 不 使 用 语句 1 也 可 以 。 

您 可 以 在 语句 1 中 初始 化 任意 (或 者 多 个 ) 值 : 


实例 : 


for (var i=0,len=cars.length;> i<len; i++) 


document .write(cars[i] + "<br>"); 


同时 您 还 可 以 省 略语 句 1 〈 比 如 在 循环 开始 前 已 经 设置 了 值 时 ) 


实例 : 


var i=2,len=cars.length; 
for (; i<len; i++) 


document .write(cars[i] + "<br>"); 


语句 2 


通常 语句 2 用 于 评估 初始 变量 的 条 件 。 

语句 2 同样 是 可 选 的 。 

如 果 语 句 2 返回 true， 则 循环 再 次 开始 ， 如 果 返 回 false， 则 循环 将 结束 。 

提示 : 如 果 您 省 略 了 语句 2， 那 么 必须 在 循环 内 提供 break。 否 则 循环 就 无 法 停 下 来 。 这 样 有 
可 能 令 浏 览 器 骨 溃 。 请 在 本 教程 稍 后 的 章节 阅读 有 关 break HAR, 

语句 3 

通常 语句 3 会 增加 初始 变量 的 值 。 

语句 3 也 是 可 选 的 。 

语句 3 有 多 种 用 法 。 增 量 可 以 是 负数 (i--)， 或 者 更 大 (i=i+15)。 

语句 3 也 可 以 省 略 〈 比 如 当 循 环 内 部 有 相应 的 代码 时 ) 


实例 : 


var i=0,len=cars.length; 
for (; i<len; ) 


document .write(cars[i] + "<br>"); 
i++; 


} 


For/in 循环 


JavaScript for/in 语句 循环 通 历 对 象 的 属性 : 


实例 


var person={fname:"John", 1name:"Doe",age:25}; 


for (x `in` person) 
{ 


txt=txt + person[x]; 


} 
您 将 在 有 关 JavaScript 对 象 的 章节 学 到 更 多 有 关 for / in 循环 的 知识 。 
n 4 
While 循环 
我 们 将 在 下 一 章 为 您 讲解 while 循环 和 do/while 循环 。 
课外 书 
如 需 更 多 有 关 JavaScript for 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 


ECMAScript 3&(¢i4 4) 


迭代 语句 又 叫 循 环 语 句 。 本 节 为 您 介绍 ECMAScript 提供 的 四 种 迭代 语句 。 


JavaScript While 循环 


只 要 指定 条 件 为 true， 循 环 就 可 以 一 直 执 行 代 码 。 


while 循环 
While 循环 会 在 指定 条 件 为 真 时 循环 执行 代码 块 。 
语法 


while (条 件 ) 


{ 
需要 执行 的 代码 


实例 
本 例 中 的 循环 将 继续 运行 ， 只 要 变量 i 小 于 5: 
while (i<5) 
{ 
x=x + "The number is " + i + "<br>"; 


algae 


} 


提示 : 如 果 您 忘记 增加 条 件 中 所 用 变量 的 值 ， 该 循环 永远 不 会 结束 。 该 可 能 导致 浏览 器 月 
中 
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do/while 循环 


do/while 循环 是 while 循环 的 变 体 。 该 循环 会 执行 一 次 代码 块 ， 在 检查 条 件 是 否 为 真 之 前 ， 然 
后 如 果 条 件 为 真 的 话 ， 就 会 重复 这 个 循环 。 


语法 


do 
{ 
需要 执行 的 代码 


while (条 件 ); 


实例 
下 面 的 例子 使 用 do/while 循环 。 该 循环 至 少 会 执行 一 次 ， 即 使 条 件 是 false， 人 隐藏 代码 块 会 在 
条 件 被 测试 前 执行 : 


do 


x=x + "The number is " + i + "<br>"; 
TER: 


} 
while (i<5); 


别 忘 记 增 加 条 件 中 所 用 变量 的 值 ， 否 则 循环 永远 不 会 结束 ! 


比较 for 和 while 


如 果 您 已 经 阅读 了 前 面 那 一 章 关 于 for 循环 的 内 容 ， 您 会 发 现 while 循环 与 for 循环 很 像 。 


for 语句 实例 
本 例 中 的 循环 使 用 for 循环 来 显示 cars 数组 中 的 所 有 值 : 


cars=["BMW", "Volvo", "Saab", "Ford"]; 
var i=0; 

for (;cars[i];) 

document .write(cars[i] + "<br>"); 
i++; 


} 
while 语句 实例 


本 例 中 的 循环 使 用 使 用 while 循环 来 显示 cars 数组 中 的 所 有 值 : 


cars=["BMW", "Volvo", "Saab", "Ford"]; 
var i=0; 

while (cars[i]) 

document .write(cars[i] + "<br>"); 
i++; 


} 


课外 书 
如 需 更 多 有 关 JavaScript while 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 


ECMAScript 迭代 语句 


迭代 语句 又 叫 循 环 语 句 。 本 节 为 您 介绍 ECMAScript 提供 的 四 种 迭代 语句 。 


JavaScript Break 和 Continue 语句 

break 语句 用 于 跳出 循环 。 

continue 用 于 跳 过 循环 中 的 一 个 迭代 。 

Break 语句 

我 们 已 经 在 本 教程 稍 时 的 章节 中 见 到 过 break 语句 。 它 用 于 跳出 switch() 语句 。 
break 语句 可 用 于 跳出 循环 。 

break 语句 跳出 循环 后 ， 会 继续 执行 该 循环 之 后 的 代码 (如 果 有 的 话 ) 


实例 
for (i=0;i<10;i++) 
x=x + "The number is " + i + "<br>"; 
} 
由 于 这 个 if 语句 只 有 一 行 代码 ， 所 以 可 以 省 略 花 括号 : 
for (i=0;i<10;i++) 
{ 
“if (i==3) break;. 


x=x + "The number is " + i + "<br>"; 


} 


Continue 语句 


continue 语句 中 断 循环 中 的 迭代 ， 如 果 出 现 了 指定 的 条 件 ， 然 后 继续 循环 中 的 下 一 个 迭代 。 
该 例子 跳 过 了 值 3 : 


实例 


for (i=0;i<=10; i++) 
if (i==3) continue; 


x=x + "The number is " + i + "<br>"; 


} 


JavaScript 标签 


正如 您 在 switch 语句 那 一 章 中 看 到 的 ， 可 以 对 JavaScript 语句 进行 标记 。 


如 需 标记 JavaScript 语句 ， 请 在 语句 之 前 加 上 冒号 : 


label: 
语句 


break 和 continue 语句 仅仅 是 能 够 跳出 代码 块 的 语句 。 
语法 


break labelname; 


continue labelname; 


continue 语句 〈 带 有 或 不 带 标签 引用 ) 只 能 用 在 循环 中 。 
break 语句 (不 带 标签 引用 ) ， 只 能 用 在 循环 或 switch 中 。 


通过 标签 引用 ，break 语句 可 用 于 跳出 任何 JavaScript 代码 块 : 


实例 


cars=["BMW", "Volvo", "Saab", "Ford"]; 
list: 

{ 

document .write(cars[0] + "<br>"); 
document .write(cars[1] + "<br>"); 
document .write(cars[2] + "<br>"); 
break list; 

document .write(cars[3] + "<br>"); 
document .write(cars[4] + "<br>"); 
document .write(cars[5] + "<br>"); 


} 


课外 书 


如 需 更 多 有 关 JavaScript Break 和 Continue 语句 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相 
关内 容 : 


ECMAScript break 和 continue 语句 


本 节 讲 解 了 break 语句 和 continue 语句 的 不 同 之 处 ， 以 及 如 何 与 有 标签 语句 一 起 使 用 。 


JavaScript 错误 - Throw、Try 和 Catch 


try 语句 测试 代码 块 的 错误 。 
catch 语句 义理 错误 。 


throw 语句 创建 自 定义 错误 。 


tw hA 
错误 ERRE 
当 JavaScript 引 敬 执行 JavaScript 代码 时 ， 会 发 生 各 种 错误 : 


可 能 是 语法 错误 ， 通 常 是 程序 员 造 成 的 编码 错误 或 错别字 。 


吕 | 


能 是 拼写 错误 或 语言 中 缺少 的 功能 〈 可 能 由 于 浏览 器 差异 ) o 


吕 | 


能 是 由 于 来 自 服务 器 或 用 户 的 错误 输出 而 导致 的 错误 。 
当然 ， 也 可 能 是 由 于 许多 其 他 不 可 预知 的 因素 。 


JavaScript 抛 出 错误 
当 错 误 发 生 时 ， 当 事情 出 问题 时 ，JavaScript 引擎 通常 会 停止 ， 并 生成 一 个 错误 消息 。 


描述 这 种 情况 的 技术 术语 是 : JavaScript 将 抛 出 一 个 错误 。 


JavaScript 测试 和 捕捉 
try 语句 允许 我 们 定义 在 执行 时 进行 错误 测试 的 代码 块 。 
catch 语句 允许 我 们 定义 当 try 代码 块 发 生 错 误 时 ， 所 执行 的 代码 块 。 


JavaScript 语句 try 和 catch 是 成 对 出 现 的 。 
语法 


try 

{ 2 

// 在 这 里 运行 代码 
catch(err) 


{ 
// 在 这 里 处 理 错误 
} 


实例 
在 下 面 的 例子 中 ， 我 们 故意 在 try 块 的 代码 中 写 了 一 个 错字 。 
catch 块 会 捕捉 到 try 块 中 的 错误 ， 并 执行 代码 来 处 理 它 。 


<!DOCTYPE html> 
<html> 

<head> 

<script> 

var txt=""" 
function message() 


{ 

try 
adddlert("welcome guest!"); 

catch(err) 
txt="There was an error on this page.\n\n"; 
txtt+t="Error description: " + err.message + "\n\n"; 
txtt+="Click OK to continue.\n\n"; 
alert(txt); 


} 
} 


</script> 
</head> 


<body> 
<input type="button" value="View message" onclick="message()"> 
</body> 


</html> 


Throw 语句 
throw 语句 允许 我 们 创建 自 定义 错误 。 
正确 的 技术 术语 是 : 创建 或 抛 出 异常 (exception) 。 
如 果 把 throw 与 try 和 catch 一 起 使 用 ， 那 么 您 能 够 控制 程序 流 ， 并 生成 自 定义 的 错误 消息 。 
语法 
throw _exception_ 


异常 可 以 是 JavaScript FAB. ME. ZARIK. 


实例 


本 例 检测 输入 变量 的 值 。 如 果 值 是 错误 的 ， 会 抛 出 一 个 异常 (错误 ) 。catch 会 捕捉 到 这 个 错 
误 ， 并 显示 一 段 自 定 义 的 错误 消息 : 


<script> 
function myFunction() 


{ 
try 
{ 
var x=document.getElementById("demo").value; 
if (x=="") “throw "empty"; 
if(isNaN(x)) “throw "not a number"`; 
if (x>10) “throw "too high"; 
if (x<5) “throw "too low"; 
catch(err) 


var y=document.getElementById("mess"); 
y.innerHTML="Error: " + err + "."; 
} 

} 


</script> 

<hi>My First JavaScript</h1> 

<p>Please input a number between 5 and 10:</p> 

<input id="demo" type="text"> 

<button type="button" onclick="myFunction()">Test Input</button> 
<p id="mess"></p> 


请 注意 ， 如 果 getElementByld HAH, LMP FHAHMH—ThH iz. 


课外 阅读 


JavaScript 高 级 教程 : JavaScript 历史 、 JavaScript 实现 


JavaScript 表单 验证 


JavaScript 可 用 来 在 数据 被 送 往 服务 器 前 对 HTML 表单 中 的 这 些 输入 数据 进行 验证 。 


JavaScript 表单 验证 
JavaScript 可 用 来 在 数据 被 送 往 服务 器 前 对 HTML 表单 中 的 这 些 输入 数据 进行 验证 。 
被 JavaScript 验证 的 这 些 典 型 的 表单 数据 有 : 


。 用 户 是 否 已 填写 表单 中 的 必 填 项 目 ? 

。 用 户 输入 的 邮件 地 址 是 否 合法 ? 

。 用 户 是 否 已 输入 合法 的 日 期 ? 

。 用 户 是 否 在 数据 域 numeric field) 中 输入 了 文本 ? 


WE (或 必 选 ) AEA 


下 面 的 函数 用 来 检查 用 户 是 否 已 填写 表单 中 的 必 填 (或 必 选 ) 项 目 。 假 如 必 填 或 必 选 项 为 
空 ， 那 么 警告 框 会 漳 出 ， 并 且 画 数 的 返回 值 为 false, ARARE AN A true (意味 着 数 
据 没 有 问题 ) 


function validate_required(field,alerttxt) 

{ 

with (field) 

if (value==null||value=="") 
{alert(alerttxt);return false} 


else {return true} 


} 


下 面 是 连同 HTML 表单 的 代码 : 


<html> 
<head> 
<script type="text/javascript"> 
` function validate_required(field,alerttxt) 


{ 
with (field) 


if (value==null | | value=="" ) 
{alert(alerttxt);return false} 
else {return true} 


} 
} 


function validate_form(thisform) 
{ 
with (thisform) 


if (validate_required(email, "Email must be filled out!")==false) 
{email.focus();return false} 
} 
i 
</script> 
</head> 


<body> 

<form action="sSubmitpage.htm" onsubmit="return validate_form(this)" method="post"> 
Email: <input type="text" name="email" size="30"> 

<input type="submit" value="Submit"> 

</form> 

</body> 


</html> 


E-mail 验证 


下 面 的 函数 检查 输入 的 数据 是 否 符合 电子 邮件 地 址 的 基本 语法 。 


意思 就 是 说 ， 输 入 的 数据 必须 包含 @ 符号 和 点 号 (.)。 同 时 ，@ 不 可 以 是 邮件 地 址 的 首 字符 ， 
并 且 @ 之 后 需 有 至 少 一 个 点 号 : 


function validate_email(field,alerttxt) 


{ 

with (field) 

{ 

apos=value.indexof("@") 

dotpos=value.lastIindexof(".") 

if (apos<1||dotpos-apos<2) 
{alert(alerttxt);return false} 

else {return true} 

} 

} 


下 面 是 连同 HTML 表单 的 完整 代码 : 


<html> 

<head> 

<script type="text/javascript"> 
“function validate_email(field, alerttxt) 


{ 
with (field) 


apos=value.index0f("@") 

dotpos=value.lastIndexof(".") 

if (apos<1||dotpos-apos<2) 
f{alert(alerttxt);return false} 

else {return true} 

} 

} 


function validate_form(thisform) 
{ 
with (thisform) 


if (validate_email(email,"Not a valid e-mail address!")==false) 
{email.focus();return false} 
} 


y 
</script> 
</head> 


<body> 

<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> 
Email: <input type="text" name="email" size="30"> 

<input type="submit" value="Submit"> 

</form> 

</body> 


</html> 


JavaScript 保留 关键 字 


在 JavaScript 中 ， 


一 些 标识 符 是 保留 关键 字 ， 不 能 用 作 变 量 名 或 函数 名 。 


JavaScript 标准 


所 有 的 现代 浏览 器 完全 支持 ECMAScript 3 (ES3，JavaScript 的 第 三 版 ， 从 1999 年 开 


始 ) 。 


ECMAScript 4 (ES4) 未 通过 
ECMAScript 5 (ES5, 2009 年 发 布 ) ， 是 JavaScript 最 新 的 官方 版 本 。 
随 着 时 间 的 推移 ， 我 们 开始 看 到 ， 所 有 的 现代 浏览 器 已 经 完全 支持 ES5。 


JavaScript 保留 关键 字 


Javascript 的 保留 关键 字 不 可 以 用 作 变 量 、 标 签 或 者 范 数 名 。 有 些 保 留 关 键 字 是 作为 


Javascript 以 后 扩展 使 用 。 
abstract arguments 

Case catch 
continue debugger 
double else 
extends* false 
for function 
import* in 
let long 
package private 
short static 
this throw 
try typeof 
while with 


。 标记 的 关键 字 是 


boolean 


char 
default 
enum* 
final 

goto 
instanceof 
native 
protected 
super™ 
throws 
var 


yield 


ECMAScript5 中 新 添加 的 。 


break 
class* 
delete 
eval 
finally 
if 
int 
new 
public 
switch 
transient 


void 


byte 
const 
do 
export* 
float 
implements 
interface 
null 
return 
synchronized 
true 


volatile 


JavaScript 对 象 、 属 性 和 方法 


您 也 应 该 避免 使 用 JavaScript 内 置 的 对 象 、 属 性 和 方法 的 名 称 作 为 Javascript 的 变量 或 函数 
名 : 


Array Date eval function hasOwnProperty 
Infinity isFinite isNaN isPrototypeOf length 
Math NaN name Number Object 
prototype String toString undefined valueOf 
DJ 2 
Java 保留 关键 字 


JavaScript 经 常 与 Java 一 起 使 用 。 您 应 该 避免 使 用 一 些 Java 对 象 和 属性 作为 JavaScript 标 
识 符 : 


getClass java JavaArray 


javaClass JavaObject JavaPackage 


Windows 保留 关键 字 


JavaScript 可 以 在 HTML 外 部 使 用 。 它 可 在 许多 其 他 应 用 程序 中 作为 编程 语言 使 用 。 


在 HTML 中 ， 您 必须 (为 了 可 移植 性 ， 您 也 应 该 这 么 做 ) 避免 使 用 HTML 和 Windows 对 象 
和 属性 的 名 称 作 为 Javascript We SRAM : 


alert all anchor anchors 
assign blur button checkbox 
clearTimeout clientInformation close closed 
constructor crypto decodeURI decodeURIComponent 
document element elements embed 
encodeURI encodeURIComponent escape event 
focus form forms frame 
innerWidth layer layers link 
mimeTypes navigate navigator frames 
hidden history image images 
open opener option outerHeight 
packages pageXOffset pageYOffset parent 
parselnt password pkcs11 plugin 
propertylsEnum radio reset screenX 
scroll secure select self 
setTimeout status submit taint 
textarea top unescape untaint 


HTML 事件 句柄 


除 此 之 外 ， 您 还 应 该 避免 使 用 HTML 事件 句柄 的 名 称 作为 Javascript Wk SRAM, 


实例 : 
onblur onclick onerror onfocus 
onkeydown onkeypress onkeyup onmouseover 
onload onmouseup onmousedown onsubmit 


非 标准 JavaScript 


除了 保留 关键 字 ， 在 JavaScript 实现 中 也 有 一 些 非 标准 的 关键 字 。 


一 个 实例 是 const 关键 字 ， 用 于 定义 变量 。 一 些 JavaScript 引擎 把 const 当 作 var 的 同 义 
词 。 另 一 些 引 擎 则 把 const 当 作 只 读 变量 的 定义 。 


fn 


fn 


Const 是 JavaScript 的 扩展 。JavaScript 引擎 支持 它 用 在 Firefox 和 Chrome 中 。 但 是 它 并 不 
是 JavaScript 标准 ES3 或 ES5 的 组 成 部 分 。 建 议 : 不 要 使 用 它 。 


JavaScript JSON 


JSON 是 用 于 存储 和 传输 数据 的 格式 。 
JSON 通常 用 于 服务 端 向 网 页 传递 数据 。 


什么 是 JSON? 


JSON 英文 全 称 JavaScript Object Notation 
。 JSON 是 一 种 轻 量 级 的 数据 交换 格式 。 

。 JSON 是 独立 的 语言 * 

JSON 易于 理解 。 


@ JSON 使 用 JavaScript 语法 ， 但 是 JSON ee Sore 
文本 可 以 被 任何 编程 语言 读 取 及 作为 数据 格式 传 


JSON 实例 


以 下 JSON 语法 定义 了 employees 对 象 : 3 条 员工 记录 (对 象 ) 的 数组 : 


JSON Example 


{"employees": [ 
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter", "lastName":"Jones"} 


]} 


JSON 格式 化 后 为 JavaScript 对 象 


JSON 格式 在 语法 上 与 创建 JavaScript 对 象 代码 是 相同 的 。 
由 于 它们 很 相似 ， 所 以 JavaScript 程序 可 以 很 容易 的 将 JSON 数据 转换 为 JavaScript 对 象 。 


JSON 语法 规则 


。 数据 为 键 / 值 对 。 
。 数据 由 过 号 分 隔 。 


。 大 括号 保存 对 象 
。 方 括号 保存 数组 


JSON 数据 - 一 个 名 称 对 应 一 个 值 


JSON 数据 格式 为 键 / 值 对 ， 就 像 JavaScript 对 象 属性 。 
键 / 值 对 包括 字段 名 称 (在 双 引 号 中 ) ， 后 面 一 个 冒号 ， 然 后 是 值 : 


"firstName" :"John" 


JSON 对 象 


JSON 对 象 保存 在 大 括号 内 。 


就 像 在 JavaScript P, 对 象 可 以 保存 多 个 键 / 值 对 : 


{"firstName":"John", "lastName":"Doe"} 


JSON 数组 


JSON 数组 保存 在 中 括号 内 。 
就 像 在 JavaScript 中 , 数组 可 以 包含 对 象 : 


"employees":[ 


{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter", "lastName":"Jones"} 


] 


在 以 上 实例 中 ， 对 象 "employees'" 是 一 个 数组 。 包 含 了 三 个 对 象 。 


每 个 为 个 对 象 为 员工 的 记录 MA) 。 


JSON 字符 串 转换 为 JavaScript 对 象 


通常 我 们 从 服务 器 中 读 取 JSON 数据 ， 并 在 网 页 中 显示 数据 。 
简单 起 见 ， 我 们 网 页 中 直接 设置 JSON FHE (你 还 可 以 阅读 我 们 的 JSON 教程 ): 


首先 ， 创 建 JavaScript FER, FFA JSON 格式 的 数据 : 


var text = '{ "employees" : [' + 

'{ "firstName":"John" , "lastName":"Doe" },' + 

'{ "firstName":"Anna" , "lastName":"Smith" },' + 
'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; 


然后 ， 使 用 JavaScript Aime JSON.parse() 将 字符 串 转 换 为 JavaScript 对 象 : 


var obj = JSON.parse(text); 


最 后 ， 在 你 的 页 面 中 使 用 新 的 JavaScript 对 象 : 


实例 


<p id="demo"></p> 


<script> 

document .getElementById("demo").innerHTML = 
obj.employees[1].firstName + " " + obj.employees[1].lastName; 
</script> 


更 多 JSON 信息 ， 你 可 以 阅读 我 们 的 ISON 教程 。 


javascript:void(0) 含义 


我 们 经 常会 使 用 到 javascript:void(0) 这 样 的 代码 ， 那 么 在 JavaScript 中 javascript:void(0) 代 
表 的 是 什么 意思 呢 ? 


javascript:void(0) 中 最 关键 的 是 void 关键 字 ， void 是 JavaScript 中 非常 重要 的 关键 字 ， 该 操 
作 符 指定 要 计算 一 个 表达 式 但 是 不 返回 值 。 


语法 格式 如 下 : 


<head> 

<script type="text/javascript"> 
<a 

void func() 

javascript:void func() 


或 者 


void(func() ) 
javascript: void(func()) 
//--> 

</script> 

</head> 


下 面 的 代码 创建 了 一 个 超级 链接 ， 当 用 户 点 击 以 后 不 会 发 生 任 何事 。 


实例 


<a href="javascript:void(0)"> 单 击 此 处 什么 也 不 会 发 生 </a> 


当 用 户 链 接 时 ，void(0) 计算 为 0， 但 Javascript 上 没有 任何 效果 。 
以 下 实例 中 ， 在 用 户 点 击 链接 后 显示 警告 信息 : 


实例 


<head> 

<script type="text/javascript"> 

<i- 

//--> 

</script> 

</head> 

<body> 

<a href="javascript:void(alert('Warning!!!'))">R#!</a> 
</body> 


以 下 实例 中 参数 a 将 返回 undefined : 


实例 


<head> 
<script type="text/javascript"> 
<!-- 
function getValue(){ 
var a,b,c; 


a = void (b=5, c=7 ); 
document.write('a='+a+'b='+b+t+'c=' +c); 
} 
//--> 
</script> 
</head> 


href="#" 与 href="javascript:void(0)" 的 区 别 


# 包含 了 一 个 位 置信 息 ， 默 认 的 销 是 大 op 也 就 是 网 页 的 上 端 。 
而 javascript:void(0), 仅仅 表示 一 个 死 链 接 。 
在 页 面 很 长 的 时 候 会 使 用 # 来 定位 页 面 的 具体 位 置 ， 格 式 为 : # + id, 


如 果 你 要 定义 一 个 死 链 接 请 使 用 javascript:void(0) 。 


实例 


<a href="javascript:void(0);"> 点 我 没有 反应 的 1!</a> 
<a href="#pos"> 点 我 定位 到 指定 位 置 !</a> 
<br><br><br> <p id="pos"> 尾 部 定位 点 </p> 


JavaScript 高 级 


JavaScript 对 象 
JavaScript 中 的 所 有 事物 都 是 对 象 : SRB. Ba. Bea, WH... 
此 外 ，JavaScript 人 允许 自 定义 对 象 。 
JavaScript 对 象 
JavaScript 提供 多 个 内 建 对 象 ， 比 如 String、Date、Array 等 等 。 
对 象 只 是 带 有 属性 和 方法 的 特殊 数据 类 型 。 
访问 对 象 的 属性 
属性 是 与 对 象 相 关 的 值 。 
访问 对 象 属性 的 语法 是 : 
_objectName_._propertyName_ 


这 个 例子 使 用 了 String 对 象 的 length 属性 来 获得 字符 串 的 长 度 : 


var message="Hello World!"; 
var x=message. length ; 


在 以 上 代码 执行 后 ，x 的 值 将 是 : 
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访问 对 象 的 方法 
方法 是 能 够 在 对 象 上 执行 的 动作 。 


您 可 以 通过 以 下 语法 来 调用 方法 : 


_objectName_._methodName_() 


这 个 例子 使 用 了 String 对 象 的 toUpperCase() 方法 来 将 文本 转换 为 大 写 : 


var message="Hello world!"; 
var x=message. toUpperCase() >; 


在 以 上 代码 执行 后 ，x 的 值 将 是 : 


HELLO WORLD! 


创建 JavaScript 对 象 


通过 JavaScript， 您 能 够 定义 并 创建 自己 的 对 象 。 
创建 新 对 象 有 两 种 不 同 的 方法 : 


1. 定义 并 创建 对 象 的 实例 
2. 使 用 男 数 来 定义 对 象 ， 然 后 创建 新 的 对 象 实例 


创建 直接 的 实例 
这 个 例子 创建 了 对 象 的 一 个 新 实例 ， 并 向 其 添加 了 四 个 属性 : 
实例 


person=new Object(); 
person. firstname="Bill"; 
person. lastname="Gates"; 
person.age=56; 
person.eyecolor="blue"; 


替代 语法 (EA xt & literals) 


实例 


person={firstname:"John", lastname:"Doe",age:50, eyecolor:"blue"}; 
~s oo 
使 用 对 象 构造 器 
本 例 使 用 西数 来 构造 对 象 : 


实例 


function person(firstname, lastname, age, eyecolor) 


{ 


this.firstname=firstname; 
this.lastname=lastname; 
this.age=age; 
this.eyecolor=eyecolor; 


} 


创建 JavaScript 对 象 实例 
一 且 您 有 了 对 象 构造 器 ， 就 可 以 创建 新 的 对 象 实例 ， 就 像 这 样 : 


var myFather=new person("Bill", "Gates",56,"blue"); 
var myMother=new person("Steve", "Jobs",48,"green"); 


把 属性 添加 到 JavaScript 对 象 


您 可 以 通过 为 对 象 赋值 ， 向 已 有 对 象 添加 新 属性 : 


假设 personObj 已 存在 - 您 可 以 为 其 添加 这 些 新 属性 firstname, lastname, age 以 及 
eyecolor : 


person. firstname="Bill"; 
person. lastname="Gates"; 
person.age=56; 

person.eyecolor="blue"; 


x=person. firstname; 


在 以 上 代码 执行 后 ，x 的 值 将 是 : 


Bill 


把 方法 添加 到 JavaScript 对 象 


FBR SMM tt REY HR, 


it 
FE Ai ae SAAB ESL TRAY : 


function person(firstname, lastname, age, eyecolor) 


{ 
this.firstname=firstname; 
this.lastname=lastname; 
this.age=age; 
this.eyecolor=eyecolor; 


this .changeName=changeName; 
function changeName(name) 


this.lastname=name; 
} 
} 


changeName() 函数 name 的 值 赋 给 person BY lastname 属性 。 


现在 您 可 以 试 一 下 : 


myMother.changeName("Ballmer"); 


JavaScript # 


JavaScript 是 面向 对 象 的 语言 ， 但 JavaScript 不 使 用 类 。 


在 JavaScript 中 ， 不 会 创建 类 ， 也 不 会 通过 类 来 创建 对 象 (就 像 在 其 他 面向 对 象 的 语言 中 屠 
样 ) 。 


JavaScript 基于 prototype， 而 不 是 基于 类 的 。 


a n 4 
JavaScript for...in 循环 
JavaScript for...in 语句 循环 通 万 对 象 的 属性 。 
iB} 
for (对 象 中 的 变量 ) 

{ 

要 执行 的 代码 

} 
注释 : for..in 循环 中 的 代码 块 将 针对 每 个 属性 执行 一 次 。 


实例 


循环 声 历 对 象 的 属性 : 


var person={fname: "Bill", lname: "Gates", age:56}; 
for (x in person) 


txt=txt + person[x]; 


} 


课外 书 

如 需 更 多 有 关 JavaScript 对 象 的 知识 ， 请 阅读 JavaScript 高 级 教程 中 的 相关 内 容 : 
ECMAScript 面向 对 象 技术 

本 节 简 要 介绍 了 面向 对 象 技术 的 术语 、 面 向 对 象 语言 的 要 求 以 及 对 象 的 构成 。 
ECMAScript 对 象 应 用 

本 节 讲 解 了 如 何 声明 和 实例 化 对 象 ， 如 何 引 用 和 废除 对 象 ， 以 及 绑 定 的 概念 。 
ECMAScript 对 象 类 型 


本 节 介绍 了 ECMAScript 的 三 种 类 型 : 本 地 对 象 、 内 置 对 象 和 宿主 对 象 ， 并 提供 了 指向 相关 
参考 手册 的 链接 。 


ECMAScript 对 象 作用 域 

本 节 讲 解 了 ECMAScript 作用 域 以 及 this 关键 字 。 
ECMAScript 定义 类 或 对 象 

本 节 详 细 讲 解 了 创建 ECMAScript 对 象 或 类 的 各 种 方式 。 
ECMAScript 修改 对 象 


本 节 讲 解 了 如 何 通过 创建 新 方法 或 重 定义 已 有 方法 来 修改 对 象 。 


JavaScript Number 对 象 
JavaScript 只 有 一 种 数字 类 型 。 


可 以 使 用 也 可 以 不 使 用 小 数 点 来 书写 数字 。 


JavaScript 数字 
JavaScript 数字 可 以 使 用 也 可 以 不 使 用 小 数 点 来 书写 : 
实例 


var pi=3.14; // 使 用 小 数 点 
var x=34; // 不 使 用 小 数 点 


极 大 或 极 小 的 数字 可 通过 科学 (指数 ) 计数 法 来 写 : 


实例 


var y=123e5; // 12300000 
var z=123e-5; // 0.00123 


所 有 JavaScript 数字 均 为 64 位 


JavaScript 不 是 类 型 语言 。 与 许多 其 他 编程 语言 不 同 ，JavaScript 不 定义 不 同类 型 的 数字 ， 


如 整数 、 短 、 长 、 浮 点 等 等 。 
JavaScript 中 的 所 有 数字 都 存储 为 根 为 10 的 64 位 (8 比特 ) ， 浮 点 数 。 


精度 


整数 (不 使 用 小 数 点 或 指数 计数 法 ) 最 多 为 15 位 。 


小 数 的 最 大 位 数 是 17， 但 是 浮 点 运算 并 不 总 是 100% 准确 : 


实例 


var x=0.2+0.1; 


比 


进 制 和 十 六 进 制 | 


如 果 前 级 为 0， 则 JavaScript 会 把 数值 常量 解释 为 八进制 数 ， 如 果 前 级 为 0 和 "x"， 则 解释 为 
十 六 进 制 数 。 


实例 


var y=0377,; 
var z=0xFF; 


提示 : 绝 不 要 在 数字 前 面 写 需 ， 除 非 您 需要 进行 八进制 转换 。 


数字 属性 和 方法 
属性 : 


e MAX VALUE 

e MIN VALUE 

e NEGATIVE INFINITIVE 
e POSITIVE INFINITIVE 
e NaN 

e prototype 

e constructor 


AK : 


e toExponential() 
e toFixed() 

e toPrecision() 
e toString() 

e valueOf() 


完整 的 Number 对 象 参 考 手 册 


如 需 可 用 于 Number 对 象 的 所有 属性 和 方法 的 完整 参考 ， 请 访问 我 们 的 Number 对 象 参考 手 
册 。 


该 参考 手册 包含 每 个 属性 和 方法 的 描述 和 实例 。 


JavaScript 字符 串 (String) 对 象 


String 对 象 用 于 处 理 已 有 的 字符 块 。 


JavaScript String (FFE) 对 象 实例 


计算 字符 串 的 长 度 
如 何 使 用 长 度 属性 来 计算 字符 串 的 长 度 。 


<html> 
<body> 
<script type="text/javascript"> 


var txt="Hello World!" 
document .write(txt.length) 


</script> 


</body> 
</html> 


为 字符 串 添 加 样式 
如 何 为 字符 串 添 加 样式 。 


<html> 
<body> 


<script type="text/javascript"> 
var txt="Hello World!" 


document .write("<p>Big: " + txt.big() + "</p>") 
document .write("<p>Small: " + txt.small() + "</p>") 


document .write("<p>Bold: " + txt.bold() + "</p>") 


document .write("<p>Italic: " + txt.italics() + "</p>") 

document .write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>") 
document .write("<p>Fixed: " + txt.fixed() + "</p>") 

document .write("<p>Strike: " + txt.strike() + "</p>") 

document .write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>") 

document .write("<p>Fontsize: " + txt.fontsize(16) + "</p>") 

document .write("<p>Lowercase: " + txt.toLowerCase() + "</p>") 

document .write("<p>Uppercase: " + txt.toUpperCase() + "</p>") 

document .write("<p>Subscript: " + txt.sub() + "</p>") 

document. .write("<p>Superscript: " + txt.sup() + "</p>") 

document .write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>") 
</script> 

</body> 

</html> 


indexOf() 方法 


如 何 使 用 indexOf() 来 定位 字符 串 中 某 一 个 指定 的 字符 首次 出 现 的 位 置 。 
<html> 
<body> 
<script type="text/javascript"> 
var str="Hello world!" 
document .write(str.indexOf("Hello") + "<br />") 
document .write(str.indexOf("World") + "<br />") 
document .write(str.indexOf ("world") ) 


</script> 


</body> 
</html> 


match() 方法 


如 何 使 用 match() 来 查找 字符 串 中 特定 的 字符 ， 并 且 如 果 找 到 的 话 ， 则 返回 这 个 


<html> 
<body> 


<script type="text/javascript"> 

var str="Hello world!" 

document .write(str.match("world") + "<br />") 
document .write(str.match("World") + "<br />") 
document .write(str.match("worlld") + "<br />") 
document .write(str.match("world!")) 


</script> 


</body> 
</html> 


如 何 替 换 字 符 串 中 的 字符 - replace() 
如 何 使 用 replace() 方法 在 字符 串 中 用 某 些 字符 替换 另 一 些 字符 。 


<html> 
<body> 


<script type="text/javascript"> 


var str="Visit Microsoft!" 
document .write(str.replace(/Microsoft/, "W3School") ) 


</script> 
</body> 
</html> 


完整 的 String 对 象 参考 手册 


请 查看 我 们 的 JavaScript String 对 象 参考 手册 ， 其 中 提供 了 可 以 与 字符 串 对 象 一 同 使 用 的 所 
有 的 属性 和 方法 。 


这 个 手册 包含 的 关于 每 个 属性 和 方法 的 用 法 的 详细 描述 和 实例 。 
oy 

字符 串 对 象 

字符 串 对 象 用 于 处 理 已 有 的 字符 块 。 

例子 : 


下 面 的 例子 使 用 字符 串 对 象 的 长 度 属性 来 计算 字符 串 的 长 度 。 


var txt="Hello world!" 
document .write(txt. length ) 


上 面 的 代码 输出 为 : 


12 


下 面 的 例子 使 用 字符 串 对 象 的 toUpperCase() 方 法 将 字符 串 转 换 为 大 写 : 


var txt="Hello world!" 
document .write(txt. ~ toUpperCase() ~~) 


上 面 的 代码 输出 为 : 


HELLO WORLD! 


相关 页 面 


JavaScript 高 级 教程 : ECMAScript 类 型 转换 
JavaScript 高 级 教程 : ECMAScript 引用 类 型 


JavaScript 参考 手册 : String 对 象 


JavaScript Date (日 期 ) 对 象 


日 期 对 象 用 于 处理 日 期 和 时 间 。 


JavaScript Date (日 期 ) 对 象 实例 


返回 当日 的 日 期 和 时 间 
如 何 使 用 Date() 方法 获得 当日 的 日 期 。 


<html> 

<body> 

<script type="text/javascript"> 
document .write(Date() ) 
</script> 


</body> 
</html> 


getTime() 


getTime() 返回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 。 


<html> 

<body> 

<script type="text/javascript"> 

var d=new Date(); 

document .write("M 1970/01/01 至 今 已 过 去 " + d.getTime() + " BH"); 
</script> 


</body> 
</html> 


setFullYear() 


如 何 使 用 setFullYear() 设置 具体 的 日 期 。 


<html> 
<body> 


<script type="text/javascript"> 
var d = new Date() 
d.setFullYear (1992, 10,3) 
document.write(d) 


</script> 


</body> 
</html> 


toUTCString() 


如 何 使 用 toUTCString() 将 当日 的 日 期 (根据 UTC) 转换 为 字符 串 。 


<html> 
<body> 


<script type="text/javascript"> 


var d = new Date() 
document.write (d.toUTCString()) 


</script> 


</body> 
</html> 


getDay() 
如 何 使 用 getDay() 和 数组 来 显示 星期 ， 而 不 仅仅 是 数字 。 


<html> 
<body> 


<script type="text/javascript"> 


var d=new Date() 

var weekday=new Array(7) 
weekday[0]="2#8H" 
weekday[1]=" 星 期 一 " 
weekday[2]=" 星 期 二 " 
weekday[3]=" 星 期 三 " 
weekday[4]=" 星 期 四 " 
weekday[5]=" 星 期 五 " 
weekday[6]=" 星 期 六 " 


document .write(" 今 天 是 " + weekday[d.getDay()]) 
</script> 


</body> 
</html> 


显示 一 个 钟表 


如 何在 网 页 上 显示 一 个 钟表 。 


<html> 

<head> 

<script type="text/javascript"> 
function startTime() 


{ 

var today=new Date() 

var h=today.getHours() 

var m=today.getMinutes() 

var s=today.getSeconds() 

// add a zero in front of numbers<10 

m=checkTime(m) 

s=checkTime(s) 
document.getElementById('txt').innerHTML=h+":"+m+": "+s 
t=setTimeout('startTime()',500) 


} 
function checkTime(i) 


{ 

if (i<10) 
{i="0" + i} 
return i 


</script> 
</head> 


<body onload="startTime()"> 
<div id="txt"></div> 
</body> 

</html> 


完整 的 Date 对 象 参 考 手册 

我 们 提供 JavaScript Date 对 象 参 考 手 册 ， 其 中 包括 所 有 可 用 于 日 期 对 象 的 属性 和 方法 。 
该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 

定义 日 期 

Date 对 象 用 于 处理 日 期 和 和 时间。 


可 以 通过 new 关键 词 来 定义 Date 对 象 。 以 下 代码 定义 了 名 为 myDate 的 Date 对 象 : 


var myDate= new Date() 


注释 : Date 对 象 自动 使 用 当前 的 日 期 和 时 间作 为 其 初始 值 。 


操作 日 期 
通过 使 用 针对 日 期 对 象 的 方法 ， 我 们 可 以 很 容易 地 对 日 期 进行 操作 。 
在 下 面 的 例子 中 ， 我 们 为 日 期 对 象 设置 了 一 个 特定 的 日 期 (2008 年 8 月 9 日 ) : 


var myDate=new Date() 
myDate. setFullYear (2008,7,9) 


意 : 表示 月 份 的 参数 介 于 0 到 11 之 间 。 也 就 是 说 ， 如 果 希 望 把 月 设置 为 8 月 ， 则 参数 应 该 
7。 


注 
是 
在 下 面 的 例子 中 ， 我 们 将 日 期 对 象 设 置 为 5 天 后 的 日 期 : 


var myDate=new Date() 
myDate. setDate  (myDate.getDate()+5) 


注意 : 如 果 增 加 天 数 会 改变 月 份 或 者 年 份 ， 那 么 日 期 对 象 会 自动 完成 这 种 转换 。 


比较 日 期 


日 期 对 象 也 可 用 于 比较 两 个 日 期 。 
下 面 的 代码 将 当前 日 期 与 2008 年 8 月 9 日 做 了 比较 : 


var myDate=new Date(); 
myDate.setFullYear(2008,8,9); 


var today = new Date(); 

if (myDate>today) 

{ 

alert("Today is before 9th August 2008"); 
} 


else 


{ 
alert("Today is after 9th August 2008"); 
} 


JavaScript Array (数组 ) 对 象 


数组 对 象 的 作用 是 : 使 用 单独 的 变量 名 来 存储 一 系列 的 值 。 


实例 
创建 数组 
创建 数组 ， 为 其 赋值 ， 然 后 输出 这 些 值 。 


<html> 
<body> 


<script type="text/javascript"> 
var mycars = new Array() 


mycars[0] = "Saab" 
mycars[1] = "Volvo" 
mycars[2] = "BMW" 


for (i=0;i<mycars.length;it++) 


{ 


document .write(mycars[i] + "<br />") 
} 


</script> 


</body> 
</html> 


For...In 声明 


使 用 for...in 声明 来 循环 输出 数组 中 的 元 素 。 


<html> 

<body> 

<script type="text/javascript"> 
var X 

var mycars = new Array() 
mycars[0] = "Saab" 

mycars[1] = "Volvo" 

mycars[2] = "BMW" 


for (x in mycars) 


{ 


document .write(mycars[x] + "<br />") 


} 
</script> 
</body> 
</html> 


合并 两 个 数组 - concat() 


如 何 使 用 concat() 方法 来 合并 两 个 数组 。 


<html> 
<body> 


<script type="text/javascript"> 


var arr = new Array(3) 


arr[0] = "George" 
arr[1] = "John" 

arr[2] = "Thomas" 

var arr2 = new Array(3) 
arr2[0] = "James" 
arr2[1] = "Adrew" 
arr2[2] = "Martin" 


document .write(arr.concat(arr2) ) 
</script> 


</body> 
</html> 


用 数组 的 元 素 组 成 字符 串 - join() 
如 何 使 用 join() 方法 将 数组 的 所 有 元 素 组 成 一 个 字符 串 。 


<html> 
<body> 
<script type="text/javascript"> 


var arr = new Array(3); 


arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 


document .write(arr.join()); 
document .write("<br />"); 
document .write(arr.join(".")); 
</script> 


</body> 
</html> 


文字 数组 - sort() 


如 何 使 用 sort() 方法 从 字面 上 对 数组 进行 排序 。 


<html> 
<body> 


<script type="text/javascript"> 


var arr = new Array(6) 


arr[0] = "George" 
arr[1] = "John" 

arr[2] = "Thomas" 
arr[3] = "James" 
arr[4] = "Adrew" 
arr[5] = "Martin" 


document.write(arr + "<br />") 
document .write(arr.sort()) 


</script> 


</body> 
</html> 


数字 数组 - sort() 


如 何 使 用 sort() 方法 从 数值 上 对 数组 进行 排序 。 
<html> 
<body> 
<script type="text/javascript"> 
function sortNumber(a, b) 


return a - b 


} 

var arr = new Array(6) 
arr[0] = "10" 

arr[1] = "5" 

arr[2] = "40" 

arr[3] = "25" 

arr[4] = "1000" 

arr[5] = "1" 


document.write(arr + "<br />") 
document .write(arr.sort(sortNumber ) ) 


</script> 


</body> 
</html> 


完整 的 Array 对 象 参考 手册 


我 们 提供 JavaScript Array 对 象 参 考 手册 ， 其 中 包括 所 有 可 用 于 数组 对 象 的 属性 和 方法 。 
该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 


定义 数组 


数组 对 象 用 来 在 单独 的 变量 名 中 存储 一 系列 的 值 。 
我 们 使 用 关键 词 new 来 创建 数组 对 象 。 下 面 的 代码 定义 了 一 个 名 为 myArray 的 数组 对 象 : 


var myArray=new Array() 


有 两 种 向 数组 赋值 的 方法 〈 你 可 以 添加 任意 多 的 值 ， 就 像 你 可 以 定义 你 需要 的 任意 多 的 变量 
一 样 ) 。 


var mycars= new Array() 
mycars[0]="Saab" 
mycars[1]="Volvo" 
mycars[2]="BMW" 


也 可 以 使 用 一 个 整数 自 变 量 来 控制 数组 的 容量 : 


var mycars= new Array(3) 
mycars[0]="Saab" 
mycars[1]="Volvo" 
mycars[2]="BMW" 


var mycars= new Array("Saab", "Volvo", "BMW" ) ~ 


注意 : 如 果 你 需要 在 数组 内 指定 数值 或 者 逻辑 值 ， 那 么 变量 类 型 应 该 是 数值 变量 或 者 布尔 变 
量 ， 而 不 是 字符 变量 。 


访问 数组 
通过 指定 数组 名 以 及 索引 号 码 ， 你 可 以 访问 某 个 特定 的 元 素 。 
下 面 是 代码 行 : 
document ,write(mycars[0]) 
下 面 是 输出 : 


Saab 


修改 已 有 效 组 中 的 值 
如 需 修改 已 有 数组 中 的 值 ， 只 要 向 指定 下 标号 添加 一 个 新 值 即 可 : 


mycars[0]="Opel"; 


现在 ， 以 上 代码 : 
document .write(mycars[0]); 
将 输出 : 


Opel 


JavaScript Boolean (i244) 对 象 


Boolean (3244) 对 象 用 于 将 非 逮 辑 值 转换 为 逻辑 值 (true KF false) 。 


检查 逻辑 对 象 是 true 还 是 false。 


<html> 
<body> 


<script type="text/javascript"> 

var b1=new Boolean( 0) 

var b2=new Boolean(1) 

var b3=new Boolean("") 

var b4=new Boolean(null) 

var b5=new Boolean(NaN) 

var b6=new Boolean("false") 

document .write("0 是 逻辑 的 "+ b1 +"<br />") 
document .write("1 是 逻辑 的 "+ b2 +"<br />") 
document .write(" 空 字符 串 是 逻辑 的 "+ b3 + "<br />") 
document.write("null 是 逻辑 的 "+ b4+ "<br />") 
document .write("NaN 是 逻辑 的 "+ b5 +"<br />") 
document .write(" 字 符 串 'false' 是 逻辑 的 "+ b6 +"<br />") 
</script> 


</body> 
</html> 


完整 的 Boolean 对 象 参考 手册 


我 们 提供 JavaScript Boolean 对 象 参 考 手册 ， 其 中 包括 所 有 可 用 于 逻辑 对 象 的 属性 和 方法 。 
该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 


Boolean 对 象 


您 可 以 将 Boolean 对 象 理解 为 一 个 产生 逻辑 值 的 对 象 包装 器 。 


Boolean (3% 44) 对 象 用 于 将 非 逻 辑 值 转换 为 逻辑 值 (true 或 者 false) 。 


创建 Boolean 对 象 


使 用 关键 词 new KEL Boolean 对 象 。 下 面 的 代码 定义 了 一 个 名 为 myBoolean 的 逻辑 对 


象 : 


var myBoolean=new Boolean() 


注释 : 如 果 逮 辑 对 象 无 初始 值 或 者 其 值 为 0、-0、null、"、false、undefined %4 NaN, #8 
ARAN GH false. Bn), Har true (即使 当 自 变量 为 字符 串 "false" 时 ) ! 


下 面 的 所 有 的 代码 行 均 会 创建 初始 值 为 false 的 Boolean 对 象 。 


Var 
Var 
Var 
Var 
Var 
Var 


myBoolean=new 
myBoolean=new 
myBoolean=new 
myBoolean=new 
myBoolean=new 
myBoolean=new 


Boolean(); 
Boolean(0); 
Boolean(null); 
Boolean(""); 
Boolean( false); 
Boolean(NaN); 


下 面 的 所 有 的 代码 行 均 会 创 初 始 值 为 true BY Boolean 对 象 : 


Var 
Var 
Var 
Var 
Var 


myBoolean=new 
myBoolean=new 
myBoolean=new 
myBoolean=new 
myBoolean=new 


相关 页 面 


JavaScript 高 级 教程 : ECMAScript 引用 类 型 


Boolean(1); 
Boolean(true); 
Boolean("true"); 
Boolean("false"); 
Boolean("Bill Gates"); 


JavaScript 参考 手册 : Boolean 对 象 


JavaScript Math (算数 ) 对 象 


Math (算数 ) 对 象 的 作用 是 : 执行 常见 的 算数 任务 。 


实例 
round() 


如 何 使 用 round()。 


<html> 
<body> 


<script type="text/javascript"> 

document .write(Math.round(0.60) + "<br />") 
document .write(Math.round(0.50) + "<br />") 
document .write(Math.round(0.49) + "<br />") 
document .write(Math.round(-4.40) + "<br />") 
document .write(Math.round(-4.60) ) 


</script> 


</body> 
</html> 


random() 


如 何 使 用 random() 来 返回 0 到 1 之 间 的 随机 数 。 
<html> 
<body> 
<script type="text/javascript"> 
document .write(Math.random() ) 
</script> 


</body> 
</html> 


max() 


如 何 使 用 max() 来 返回 两 个 给 定 的 数 中 的 较 大 的 数 。 
两 个 参数 。) 


(在 ECMASCript v3 之 前 ， 该 方法 只 有 


<html> 
<body> 


<script type="text/javascript"> 

document .write(Math.max(5,7) + "<br />") 
document .write(Math.max(-3,5) + "<br />") 
document .write(Math.max(-3,-5) + "<br />") 
document .write(Math.max(7.25,7.30) ) 


</script> 


</body> 
</html> 


min() 


如 何 使 用 min() 来 返回 两 个 给 定 的 数 中 的 较 小 的 数 。 (在 ECMASCript v3 之 前 ， 该 方法 只 有 


两 个 参数 。) 


<html> 
<body> 


<script type="text/javascript"> 

document .write(Math.min(5,7) + "<br />") 
document .write(Math.min(-3,5) + "<br />") 
document .write(Math.min(-3,-5) + "<br />") 
document .write(Math.min(7.25,7.30) ) 


</script> 


</body> 
</html> 


完整 的 Math 对 象 参考 手册 


我 们 提供 JavaScript Math 对 象 的 参考 手册 ， 其 中 包括 所 有 可 用 于 算术 对 象 的 属性 和 方法 。 


该 手册 包含 了 对 每 个 属性 和 方法 的 详细 描述 以 及 相关 实例 。 


Math 对 象 
Math (算数 ) 对 象 的 作用 是 : 执行 普通 的 算数 任务 。 


Math 对 象 提供 多 种 算数 值 类 型 和 阔 数 。 无 需 在 使 用 这 个 对 象 之 前 对 它 进 行 定义 。 


算数 值 


JavaScript 提供 8 种 可 被 Math 对 象 访问 的 算数 值 : 
。 常数 


。 圆周 率 
。 2 的 平方 根 
e 1/2 的 平方 根 
。 2 的 自然 对 数 
。 10 的 自然 对 数 
e 以 2 为 底 的 e 的 对 数 
e 以 10 为 底 的 e 的 对 数 
这 是 在 Javascript 中 使 用 这 些 值 的 方法 : (与 上 面 的 算数 值 一 一 对 应 ) 


。 Math.E 
e Math.PI 

。 Math.SQRT2 
e Math.SQRT1_2 
。 Math.LN2 

。 Math.LN10 

。 Math.LOG2E 
。 Math.LOG10E 


算数 方法 

除了 可 被 Math 对 象 访问 的 算数 值 以 外 ， 还 有 几 个 函数 (方法 ) 可 以 使 用 。 
BA (Ais) 实例 : 

下 面 的 例子 使 用 了 Math 对 象 的 round 方法 对 一 个 数 进 行 四 舍 五 入 。 


document .write( Math.round(4.7) ) 


上 面 的 代码 输出 为 : 


下 面 的 例子 使 用 了 Math 对 象 的 random() 方法 来 返回 一 个 介 于 0 和 1 之 间 的 随机 数 : 
document .write( Math.random() ) 
上 面 的 代码 输出 为 : 


0.9370844220218102 


下 面 的 例子 使 用 了 Math 对 象 的 floor() 方法 和 random() 来 返回 一 个 介 于 0 和 10 之 间 的 随机 
数 : 


document .write( Math. floor(Math.random()*11)~ ) 


上 面 的 代码 输出 为 : 


JavaScript RegExp 对 象 


RegExp 对 象 用 于 规定 在 文本 中 检索 的 内 容 。 


什么 是 RegExp? 

RegExp 是 正则 表达 式 的 缩写 。 

当 您 检索 某 个 文本 时 ， 可 以 使 用 一 种 模式 来 描述 要 检索 的 内 容 。RegExp 就 是 这 种 模式 。 
简单 的 模式 可 以 是 一 个 单独 的 字符 。 

更 复 条 的 模式 包括 了 更 多 的 字符 ， 并 可 用 于 解析 、 格 式 检 查 、 蔡 换 等 等 。 

您 可 以 规定 字符 串 中 的 检索 位 置 ， 以 及 要 检索 的 字符 类 型 ， 等 等 。 


定义 RegExp 


RegExp 对 象 用 于 存储 检索 模式 。 


通过 new 关键 词 来 定义 RegExp 对 象 。 以 下 代码 定义 了 名 为 patt1 的 RegExp 对 象 ， 其 模式 
是 "e" : 


var patti=new RegExp("e"); 


当 您 使 用 该 RegExp 对 象 在 一 个 字符 串 中 检索 时 ， 将 寻找 的 是 字符 "e", 


RegExp 对 象 的 方法 

RegExp 对 象 有 3 个 方法 : test()、exec() 以 及 compile()。 
test() 

test) 方法 检索 字符 串 中 的 指定 值 。 返 回 值 是 true 3 false, 


例子 : 


var patt1=new RegExp("e"); 


document .write(patti.test("The best things in life are free")); 


由 于 该 字符 串 中 存在 字母 "e"， 以 上 代码 的 输出 将 是 : 


true 


TIY 


exec() 


exec() 方法 检索 字符 串 中 的 指定 值 。 返 回 值 是 被 找到 的 值 。 如 果 没 有 发 现 匹配 ， 则 返回 null, 


例子 1 : 


var patti=new RegExp("e"); 


document .write(patti.exec("The best things in life are free")); 


由 于 该 字符 串 中 存在 字母 "e"， 以 上 代码 的 输出 将 是 : 


TY 


例子 2 : 


您 可 以 向 RegExp 对 象 添 加 第 二 个 参数 ， 以 设 定 检索 。 例 如 ， 如 果 需 要 找到 所 有 某 个 字符 的 
所 有 存在 ， 则 可 以 使 用 "g" 参数 ("global"). 


如 需 关 于 如 何 修改 搜索 模式 的 完整 信息 ， 请 访问 我 们 的 RegExp 对 象 参考 手册 。 
在 使 用 "g" 参数 时 ，exec() 的 工作 原理 如 下 : 


。 找到 第 一 个 "e"， 并 存储 其 位 置 

。 如 果 再 次 运行 exec()， 则 从 存储 的 位 置 开始 检索 ， 并 找到 下 一 个 "e"， 并 存储 其 位 置 
var patt1=new RegExp("e","g"); 

do 


result=patt1.exec("The best things in life are free"); 
document .write(result) ; 


} 
while (result!=null) 


由 于 这 个 字符 串 中 6 个 "e" 字母 ， 代 码 的 输出 将 是 : 


eeeeeenull 


compile() 
compile() 方法 用 于 改变 RegExp. 


compile() 既 可 以 改变 检索 模式 ， 也 可 以 添加 或 删除 第 二 个 参数 。 


例子 : 


var patti=new RegExp("e"); 
document .write(patt1.test("The best things in life are free")); 
patti.compile("d"); 


document .write(patt1.test("The best things in life are free")); 


由 于 字符 串 中 存在 "e"， 而 没有 "d"， 以 上 代码 的 输出 是 : 


truefalse 
TIY 


完整 的 RegExp 对 象 参考 手册 


如 需 可 与 RegExp 对 象 一 同 使 用 所 有 属性 和 方法 的 完整 信息 ， 请 访问 我 们 的 RegExp 对 象 参 
考 手 册 。 


这 个 参考 手册 包含 了 对 RegExp 对 象 中 每 个 属性 和 方法 的 详细 描述 ， 以 及 使 用 的 例子 。 


JavaScript BOM 


JavaScript Window - 浏览 器 对 象 模型 


浏览 器 对 象 模型 (BOM) 使 JavaScript 有 能 力 与 浏览 器 “对 话 ”。 


浏览 器 对 象 模型 (BOM) 


浏览 器 对 象 模型 (Browser Object Model) 尚 无 正式 标准 。 


由 于 现代 浏览 器 已 经 (几乎 ) 实现 了 JavaScript 交互 性 方面 的 相同 方法 和 属性 ， 因 此 常 被 认 
为 是 BOM 的 方法 和 属性 。 


Window 对 象 

所 有 浏览 器 都 支持 Window 对 象 。 它 表示 浏览 器 窗口 。 

所 有 JavaScript 全 局 对 象 、 辑 数 以 及 变量 均 自动 成 为 window 对 象 的 成 员 。 
全 局 变量 是 window 对 象 的 属性 。 

全 局 函数 是 window 对 象 的 方法 。 

#2 HTML DOM 的 document 也 是 window 对 象 的 属性 之 一 : 


window. document .getElementById("header"); 


与 此 相同 : 


document .getElementById("header"); 


Window 尺寸 


有 三 种 方法 能 够 确定 浏览 器 窗口 的 尺寸 〈 浏 览 器 的 视 口 ， 不 包括 工具 栏 和 滚动 条 ) 。 
对 于 Internet Explorer、Chrome、Firefox、Opera 以 及 Safari : 


e window.innerHeight - 浏览 器 窗口 的 内 部 高 度 
e window.innerWidth - 浏览 器 窗口 的 内 部 宽度 


对 于 Internet Explorer 8、7、6、5: 


e document.documentElement.clientHeight 


e document.documentElement.clientWidth 
或 者 


e document.body.clientHeight 
e document.body.clientWidth 


实用 的 JavaScript 方案 (涵盖 所 有 浏览 器 ) 


实例 


var w=window.innerwidth 

|| document .documentElement.clientWidth 
|| document .body.clientWidth; 

var h=window.innerHeight 


|| document .documentElement.clientHeight 
|| document.body.clientHeight; 


该 例 显 示 浏 览 器 窗口 的 高 度 和 宽度 : 〈 不 包括 工具 栏 /滚动 条 ) 


其 他 Window 方法 


一 些 其 他 方法 : 


window.open() - 打开 新 窗口 

e window.close() - 关闭 当前 窗口 

e window.moveTo() - 移动 当前 窗口 

e window.resizeTo() - 调整 当前 窗口 的 尺寸 


JavaScript Window Screen 


window.screen 对 象 包含 有 关 用 户 屏幕 的 信息 。 


Window Screen 


window.screen 对 象 在 编写 时 可 以 不 使 用 window 这 个 前 级 。 
一 些 属 性 : 


e screen.availWidth - 可 用 的 屏幕 宽度 
e screen.availHeight - 可 用 的 屏幕 高 度 


Window Screen 可 用 宽度 


screen.availWidth 属性 返回 访问 者 屏幕 的 宽度 ， 以 像素 计 ， 减 去 界面 特性 ， 比 如 窗口 任务 
栏 。 


实例 
返回 您 的 屏幕 的 可 用 宽度 : 


<script> 
document ,write(" 可 用 宽度 :" + ~screen.availwidth’); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(" 可 用 宽度 : " + screen.availwidth);</script> 可 用 宽度 : 1366 


Window Screen 可 用 高 度 


screen.availHeight 属性 返回 访问 者 屏幕 的 高 度 ， 以 像素 计 ， 减 去 界面 特性 ， 比 如 窗口 任务 
栏 。 


实例 


<script> 
document ,write(" 可 用 高 度 :" + ~screen.availHeight~); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(" 可 用 高 度 : " + screen.availHeight);</script> 可 用 高 度 : 768 


JavaScript Window Location 


window.location 对 象 用 于 获得 当前 页 面 的 地 址 (URL)， 并 把 浏览 器 重 定向 到 新 的 页 面 。 


Window Location 
window.location 对 象 在 编写 时 可 不 使 用 window 这 个 前 级 。 
一 些 例子 : 


。 location.hostname 返回 web 主机 的 域名 

e location.pathname 返回 当前 页 面 的 路 径 和 文件 名 

e location.port 返回 web 主机 的 端口 (80 或 443) 

e location.protocol 返回 所 使 用 的 web 协议 (http:// 或 https://) 


Window Location Href 
location.href 属性 返回 当前 页 面 的 URL. 
实例 

返回 (当前 页 面 的 ) 整个 URL : 


<script> 
document ,write( “location.href. ); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(location.href);</script>http://ww.w3school.com.cn/js/js_window_lo 


= 一 用 i) 





Window Location Pathname 


location.pathname 属性 返回 URL 的 路 径 名 。 


实例 


返回 当前 URL 的 路 径 名 : 


<script> 
document ,write( ~location.pathname- ); 


</script> 


以 上 代码 输出 为 : 


<script>document .write(location. pathname) ;</script>/js/js_window_location.asp 


Window Location Assign 


location.assign() 方法 加 载 新 的 文档 。 


实例 
加 载 一 个 新 的 文档 : 


<html> 

<head> 

<script> 
function newDoc() 


*window. location.assign("http://www.w3school.com.cn")~ 
</script> 
</head> 
<body> 
<input type="button" value=" 加 载 新 文档 " onclick="newDoc()"> 


</body> 
</html> 


JavaScript Window History 


window.history 对 象 包含 浏览 器 的 历史 。 


Window History 
window. history 对 象 在 编写 时 可 不 使 用 window 这 个 前 级 。 
为 了 保护 用 户 隐私 ， 对 JavaScript 访问 该 对 象 的 方法 做 出 了 限制 。 
一 些 方法 : 
e history.back() - 与 在 浏览 器 点 击 后 退 按钮 相同 
e history.forward() - 与 在 浏览 器 中 点 击 按钮 向 前 相同 


Window History Back 


history.back() 方法 加 载 历史 列表 中 的 前 一 个 URL. 
这 与 在 浏览 器 中 点 击 后 退 按钮 是 相同 的 : 


实例 


在 页 面 上 创建 后 退 按钮 : 
<html> 
<head> 
<script> 


function goBack() 
*window.history.back()~ 

</script> 

</head> 

<body> 


<input type="button" value="Back" onclick="goBack()"> 


</body> 
</html> 


以 上 代码 输出 为 : 


<input type="button" value=" 转 到 上 一 页 " onclick="goBack()"> 


Window History Forward 


history forward() 方法 加 载 历 史 列 表 中 的 下 一 个 URL。 
这 与 在 浏览 器 中 点 击 前 进 按钮 是 相同 的 : 


实例 
在 页 面 上 创建 一 个 向 前 的 按钮 : 


<html> 
<head> 
<script> 
function goForward() 
*window.history.forward()~ 
</script> 
</head> 
<body> 
<input type="button" value="Forward" onclick="goForward()"> 


</body> 
</html> 


以 上 代码 输出 为 : 


<input type="button" value=" 转 到 下 一 页 " onclick="goForward()"> 


JavaScript Window Navigator 


window.navigator 对 象 包含 有 关 访 问 者 浏览 器 的 信息 。 


Window Navigator 


window.navigator 对 象 在 编写 时 可 不 使 用 window 这 个 前 级 。 


实例 


<div id="example"></div> 


<script> 

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; 

txt+= "<p>Browser Name: " + navigator.appName + "</p>"; 

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; 

txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p>Platform: " + navigator.platform + "</p>"; 

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; 

txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; 


document. getElementById("example") .innerHTML=txt; 


</script> 


警告 : kA navigator 对 象 的 信息 具有 误导 性 ， 不 应 该 被 用 于 检测 浏览 器 版 本 ， 这 是 因为 : 


e navigator 数据 可 被 浏览 器 使 用 者 更 改 
。 浏览 器 无 法 报告 晚 于 浏览 器 发 布 的 新 操作 系统 


浏览 梧 检 测 


由 于 navigator 可 误导 浏览 器 检测 ， 使 用 对 象 检 测 可 用 来 嗅 探 不 同 的 浏览 器 。 


由 于 不 同 的 浏览 器 支持 不 同 的 对 象 ， 您 可 以 使 用 对 象 来 检测 浏览 器 。 例 如 ， 由 于 只 有 Opera 
支持 属性 "window.opera"， 您 可 以 据 此 识别 出 Opera. 


例子 : if (window.opera) {...some action...} 


JavaScript 消息 框 


可 以 在 JavaScript 中 创建 三 种 消息 框 : 警告 框 、 确 认 框 、 提 示 框 。 


<html> 

<head> 

<script type="text/javascript"> 
function disp_alert() 

{ 

alert( "我 是 警告 框 ! !") 

} 

</script> 

</head> 

<body> 


<input type="button" onclick="disp_alert()" value=" 显 示警 告 框 " /> 


</body> 
</html> 


带 有 折 行 的 警告 框 


<html> 

<head> 

<script type="text/javascript"> 
function disp_alert() 


{ 

alert(" 再 次 向 您 问好 ! 在 这 里 ， 我 们 向 您 演示 " + '\n' + "如 何 向 警告 框 添加 折 行 。") 
</script> 

</head> 

<body> 


<input type="button" onclick="disp_alert()" value=" 显 示警 告 框 " /> 


</body> 
</html> 


确认 框 


<html> 

<head> 

<script type="text/javascript"> 
function show_confirm() 

{ 

var r=confirm("Press a button!"); 
if (r==true) 


alert("You pressed OK!"); 
} 


else 


alert("You pressed Cancel!"); 
} 

} 

</script> 

</head> 

<body> 


<input type="button" onclick="show_confirm()" value="Show a confirm box" /> 


</body> 
</html> 


提示 框 


<html> 

<head> 

<script type="text/javascript"> 
function disp_prompt() 


{ 
var name=prompt(" 请 输入 您 的 名 字 ", "Bill Gates") 
if (name!=null && name!="") 
{ 
document .write(" 你 好 !1" + name + " 今天 过 得 怎么 样 ?") 
} 
} 
</script> 
</head> 
<body> 


<input type="button" onclick="disp_prompt()" value=" 显 示 提 示 框 " /> 


</body> 
</html> 


警告 框 经 常用 于 确保 用 户 可 以 得 到 某 些 信息 。 


当 和 警告 框 出 现 后 ， 用 户 需要 点 击 确定 按钮 于 能 继续 进行 操作 。 


alert(" 文 本 " ) 


确认 框 


确认 框 用 于 使 用 户 可 以 验证 或 者 接受 某 些 信息 。 
当 确 认 框 出 现 后 ， 用 户 需要 点 击 确定 或 者 取消 按钮 才能 继续 进行 操作 。 
如 果 用 户 点 击 确认 ， 那 么 返回 值 为 rue。 如 果 用 户 点 击 取消 ， 那 么 返回 值 为 false. 


语法 : 


confirm( "文本") 


提示 框 

提示 框 经 常用 于 提示 用 户 在 进入 页 面前 栓 入 某 个 值 。 

当 提示 框 出 现 后 ， 用 户 需要 输入 某 个 值 ， 然 后 点 击 确认 或 取消 按钮 才能 继续 操纵 。 
如 果 用 户 点 击 确认 ， 那 么 返回 值 为 输入 的 值 。 如 果 用 户 点 击 取消 ， 那 么 返回 值 为 null。 


语法 : 


prompt( "文本 " i "默认 值 ") 


JavaScript 计时 


通过 使 用 JavaScript， 我 们 有 能 力 做 到 在 一 个 设 定 的 时 间 间 隔 之 后 来 执行 代码 ， 而 不 是 在 画 
数 被 调用 后 立即 执行 。 我 们 称 之 为 计时 事件 。 


实例 
简单 的 计时 
单 击 本 例 中 的 按钮 后 ， 会 在 5 秒 后 弹出 一 个 警告 框 。 


<html> 

<head> 

<script type="text/javascript"> 
function timedMsg() 


var t=setTimeout("alert('5 #9! ')",5000) 
} 

</script> 

</head> 


<body> 

<form> 

<input type="button" value=" 显 示 定 时 的 警告 框 " onClick = "timedMsg()"> 
</form> 

<p> 请 点 击 上 面 的 按钮 。 警 告 框 会 在 5 秒 后 显示 。</p> 

</body> 


</html> 


另 一 个 简单 的 计时 
本 例 中 的 程序 会 执行 2 秒 、4 秒 和 6 秒 的 计时 。 


<html> 

<head> 

<script type="text/javascript"> 
function timedText() 


var ti=setTimeout ("document .getElementById('txt').value='2 #'", 2000) 
var t2=setTimeout ("document .getElementById('txt').value='4 #'", 4000) 
var t3=setTimeout("document.getElementById('txt').value='6 #'", 6000) 


</script> 
</head> 


<body> 


<form> 

<input type="button" value=" 显 示 计 时 的 文本 " onClick="timedText()"> 
<input type="text" id="txt"> 

</form> 


<p> 点 击 上 面 的 按钮 。 输 入 框 会 显示 出 已 经 逝去 的 时 间 (2、4、6 秒 ) </p> 
</body> 


</html> 


在 一 个 无 穷 循环 中 的 计时 事件 
在 本 例 中 ， 单 击 开始 计时 按钮 后 ， 程 序 开始 从 0 以 秒 计 时 。 


<html> 

<head> 

<script type="text/javascript"> 
var c=0 

var t 

function timedCount() 

{ 

document .getElementById('txt').value=c 
c=c+1 
t=setTimeout("timedCount()",1000) 
} 

</script> 

</head> 


<body> 

<form> 

<input type="button" value=" 开 始 计时 1!" onClick="timedCount()"> 
<input type="text" id="txt"> 

</form> 

<p> 请 点 击 上 面 的 按钮 。 输 入 框 会 从 © 开始 一 直 进行 计时 。</p> 

</body> 


</html> 


带 有 停止 按钮 的 无 穷 循 环 中 的 计时 事件 
在 本 例 中 ， 点 击 计数 按钮 后 根据 用 户 输 入 的 数值 开始 倒计时 ， 点 击 停止 按钮 停止 计时 。 


<html> 

<head> 

<script type="text/javascript"> 
var c=0 

var t 

function timedCount() 

{ 

document .getElementById('txt').value=c 
c=c+1 
t=setTimeout("timedCount()",1000) 
} 


function stopCount() 


{ 

c=0; 

setTimeout ("document .getElementById('txt').value=0",0); 
clearTimeout(t); 


} 

</script> 

</head> 

<body> 

<form> 

<input type="button" value=" 开 始 计时 1" onClick="timedCount()"> 
<input type="text" id="txt"> 

<input type="button" value=" 停 止 计 时 1" onClick="stopCount()"> 
</form> 


<p> 请 点 击 上 面 的 “开始 计时 7 按钮 来 启动 计时 器 。 输 入 框 会 一 直 进 行 计 时 ， 从 6 开始 。 点 击 “ 停 止 计时 7 按钮 可 以 终止 计 : 
</body> 


</html> 
Eee 
使 用 计时 事件 制作 的 钟表 





一 个 JavaScript 小 时 钟 


<html> 

<head> 

<script type="text/javascript"> 
function startTime() 


{ 

var today=new Date() 

var h=today.getHours() 

var m=today.getMinutes() 

var s=today.getSeconds() 

// add a zero in front of numbers<10 

m=checkTime(m) 

s=checkTime(s) 

document. getElementById('txt').innerHTML=h+":"+mt": "+s 
t=setTimeout('startTime()',500) 


} 
function checkTime(i) 


{ 

if (i<10) 
{i="0" + i} 
return i 


</script> 
</head> 


<body onload="startTime()"> 
<div id="txt"></div> 
</body> 

</html> 


JavaScript 计时 事件 


通过 使 用 JavaScript， 我 们 有 能 力作 到 在 一 个 设 定 的 时 间 间 隔 之 后 来 执行 代码 ， 而 不 是 在 范 
数 被 调用 后 立即 执行 。 我 们 称 之 为 计时 事件 。 


在 JavaScritp 中 使 用 计时 事件 是 很 容易 的 ， 两 个 关键 方法 是 : 
setTimeout() 

未 来 的 某 时 执行 代码 

clearTimeout() 


取消 setTimeout() 


setTimeout() 
语法 
var t=setTimeout("javascript 语 句 ", 毫秒 ) 


setTimeout() 方法 会 返回 某 个 值 。 在 上 面 的 语句 中 ， 值 被 储存 在 名 为 t 的 变量 中 。 假 如 你 希望 
取消 这 个 setTimeout()， 你 可 以 使 用 这 个 变量 名 来 指定 它 。 


setTimeout() 的 第 一 个 参数 是 含有 JavaScript 语句 的 字符 串 。 这 个 语句 可 能 诸如 "alert('5 
seconds!')"， 或 者 对 函数 的 调用 ， 诸 如 alertMsg()"。 


第 二 个 参数 指示 从 当前 起 多 少 毫 秒 后 执行 第 一 个 参数 。 
提示 : 1000 毫秒 等 于 一 秒 。 


实例 
当下 面 这 个 例子 中 的 按钮 被 点 击 时 ， 一 个 提示 框 会 在 5 秒 中 后 弹出 。 


<html> 

<head> 

<script type="text/javascript"> 

function timedMsg() 
{ 
‘var t=setTimeout("alert('5 seconds!')",5000) ~ 
} 

</script> 

</head> 


<body> 
<form> 
<input type="button" value="Display timed alertbox!" onClick="timedMsg()"> 
</form> 
</body> 
</html> 


实例 - 无 穷 循 环 


要 创建 一 个 运行 于 无 穷 循 环 中 的 计时 器 ， 我 们 需要 编导 一 个 函数 来 调用 其 自身 。 在 下 面 的 例 


子 中 ， res 输入 域 便 从 0 开始 计数 。 


<html> 


<head> 
<script type="text/javascript"> 
var c=0 
var t 
function timedCount() 
{ 
document.getElementById('txt').value=c 
c=c+1 
~t=setTimeout ("timedCount()",1000) ~ 
} 
</script> 
</head> 


<body> 

<form> 

<input type="button" value="Start count!" onClick="timedCount()"> 
<input type="text" id="txt"> 

</form> 

</body> 


</html> 


clearTimeout() 


语法 


clearTimeout (setTimeout_variable) 


实例 


下 面 的 例子 和 上 面 的 无 穷 循环 的 例子 相似 。 唯 一 的 不 同 是 ， 现 在 我 们 添加 了 一 个 "Stop 
Count!" 按钮 来 停止 这 个 计数 器 : 


<html> 


<head> 

<script type="text/javascript"> 
var c=0 

var t 


function timedCount() 

{ 
document.getElementById('txt').value=c 
c=c+1 
`t=setTimeout("timedCount()",1000)` 

} 


function stopCount() 


{ 


`clearTimeout(t)` 
} 

</script> 

</head> 


<body> 

<form> 

<input type="button" value="Start count!" onClick="timedCount()"> 
<input type="text" id="txt"> 

<input type="button" value="Stop count!" onClick="stopCount()"> 
</form> 

</body> 


</html> 


JavaScript Cookies 


cookie 用 来 识别 用 户 。 


实例 
创建 一 个 欢迎 cookie 


利用 用 户 在 提示 框 中 输入 的 数据 创建 一 个 JavaScript Cookie， 当 该 用 户 再 次 访问 该 页 面 时 ， 
根据 cookie 中 的 信息 发 出 欢迎 信息 。 


<html> 

<head> 

<script type="text/javascript"> 
function getCookie(c_name) 


if (document.cookie.length>0) 


c_start=document.cookie.indexOf(c_name + "=") 
if (c_start!=-1) 
{ 


c_start=c_start + c_name.length+1 

c_end=document .cookie.indexOf(";",c_start) 

if (c_end==-1) c_end=document.cookie.length 

return unescape(document.cookie.substring(c_start,c_end) ) 
} 

} 


return "" 


} 


function setCookie(c_name,value,expiredays) 


{ 


var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 


document .cookie=c_namet+ "=" +escape(value)+ 
((expiredays==null) ? "" : "; expires="+exdate.toGMTString()) 
} 
function checkCookie() 
{ 
username=getCookie('username' ) 
if (username!=null && username!="") 
{alert('Welcome again 't+tusername+'!')} 
else 
{ 
username=prompt('Please enter your name:',"") 
if (username!=null && username!="") 


setCookie( 'username', username, 365) 
} 
} 
} 
</script> 
</head> 
<body onLoad="checkCookie()"> 
</body> 
</html> 


什么 是 cookie? 


cookie 是 存储 于 访问 者 的 计算 机 中 的 变量 。 每 当 同 一 台 计 算 机 通过 浏览 器 请 求 某 个 页 面 时 ， 
就 会 发 送 这 个 cookie。 你 可 以 使 用 JavaScript 来 创建 和 取 回 cookie 的 值 。 


有 关 cookie 的 例子 : 
名 字 cookie 


当 访 问 者 首次 访问 页 面 时 ， 他 或 她 也 许 会 填写 他 /她 们 的 名 字 。 名 字 会 存储 于 cookie 中 。 当 访 
问 者 再 次 访问 网 站 时 ， 他 们 会 收 到 类 似 "Welcome John Doe!" 的 欢迎 词 。 而 名 字 则 是 从 
cookie 中 取 回 的 。 


密码 cookie 


当 访 问 者 首次 访问 页 面 时 ， 他 或 她 也 许 会 填写 他 /她 们 的 密码 。 密 码 也 可 被 存储 于 cookie 中 。 
当 他 们 再 次 访问 网 站 时 ， 密 码 就 会 从 cookie 中 取 回 。 


日 期 cookie 


当 访 问 者 首次 访问 你 的 网 站 时 ， 当 前 的 日 期 可 存储 于 cookie 中 。 当 他 们 再 次 访问 网 站 时 ， 他 
们 会 收 到 类 似 这 样 的 一 条 消息 : "Your last visit was on Tuesday August 11, 2005!"。 日 期 也 是 
从 cookie 中 取 回 的 。 


创建 和 存储 cookie 


在 这 个 例子 中 我 们 要 创建 一 个 存储 访问 者 名 字 的 cookie。 当 访问 者 首次 访问 网 站 时 ， 他 们 会 
被 要 求 填写 姓名 。 名 字 会 存储 于 cookie 中 。 当 访问 者 再 次 访问 网 站 时 ， 他 们 就 会 收 到 欢迎 
14 o 


首先 ， 我 们 会 创建 一 个 可 在 cookie FSF HiT AELA : 


function setCookie(c_name, value, expiredays) 
var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 


document .cookie=c_name+ "=" +escape(value)+ 
((expiredays==null) ? "" : ";expires="+exdate.toGMTString() ) 


LACHARITE cookie 的 名 称 、 值 以 及 过 期 天 数 。 


在 上 面 的 函数 中 ， 我 们 首先 将 天 数 转 换 为 有 效 的 日 期 ， 然 后 ， 我 们 将 cookie 名 称 、 其 过 
HABA? A document.cookie 对 象 。 


之 后 ， 我 们 要 创建 另 一 个 函数 来 检查 是 否 已 设置 cookie : 


function getCookie(c_name) 
if (document .cookie.length>0) 


c_start=document.cookie.indexOf(c_name + "=") 
if (c_start!=-1) 
{ 


c_start=c_start + c_name.length+1 

c_end=document .cookie.indexOf(";",c_start) 

if (c_end==-1) c_end=document.cookie.length 

return unescape(document.cookie.substring(c_start,c_end)) 


} 
} 


return "" 


} 


上 面 的 函数 首先 会 检查 document.cookie 对 象 中 是 否 存 有 cookie。 假 如 document.cookie 对 
象 存 有 某 些 cookie， 那 么 会 继续 检查 我 们 指定 的 cookie 是 否 已 储存 。 如 果 找 到 了 我 们 要 的 
cookie， 就 返回 值 ， 否 则 返回 空 字符 串 。 


最 后 ， 我 们 要 创建 一 个 函数 ， 这 个 函数 的 作用 是 : WR cookie 已 设置 ， 则 显示 欢迎 词 ， 否 则 
显示 提示 框 来 要 求 用 户 输入 名 字 。 


function checkCookie() 


{ 
username=getCookie('username' ) 
if (username!=null && username!="") 
{alert('Welcome again '+tusername+'!')} 
else 
{ 
username=prompt('Please enter your name:',"") 
if (username!=null && username!="") 
setCookie( 'username', username, 365) 
} 
} 
} 


这 是 所 有 的 代码 : 


<html> 

<head> 

<script type="text/javascript"> 
function getCookie(c_name) 


if (document .cookie.length>0) 


c_start=document.cookie.indexOf(c_name + "=") 
if (c_start!=-1) 
{ 
c_start=c_start + c_name.length+1 
c_end=document .cookie.indexOof(";",c_start) 
if (c_end==-1) c_end=document.cookie.length 
return unescape(document.cookie.substring(c_start,c_end)) 
} 
} 


return "" 


} 


function setCookie(c_name,value,expiredays) 


{ 


var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 


document .cookie=c_name+ "=" +escape(value)+ 
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) 
} 
function checkCookie() 
{ 
username=getCookie('username' ) 
if (username!=null && username!="") 
{alert('Welcome again '+tusername+'!')} 
else 
{ 
username=prompt('Please enter your name:',"") 
if (username!=null && username!="") 


setCookie( 'username', username, 365) 


} 
} 
} 


</script> 
</head> 


<body onLoad="checkCookie()"> 
</body> 
</html> 


HTML DOM 


HTML DOM 简介 


HTML DOM 定义 了 访问 和 操作 HTML 文档 的 标准 。 


您 应 该 县 各 的 基础 lj 1A 


在 您 继续 学 习 之 前 ， 您 需要 对 以 下 内 容 拥 有 基本 的 了 解 : 


e HTML 
e CSS 
e JavaScript 


如 果 您 需要 首先 学 习 这 些 项 目 ， 请 访问 我 们 的 首页 。 


什么 是 DOM ? 


DOM 是 W3C (万 维 网 联盟 ) 的 标准 。 
DOM 定义 了 访问 HTML 和 XML 文档 的 标准 : 


“W3C 文档 对 象 模型 (DOM) 是 中 立 于 平台 和 语言 的 接口 ， 它 允许 程序 和 脚本 动态 地 访 
问 和 更 新 文档 的 内 容 、 结 构 和 样式 。 





W3C DOM 标准 被 分 为 3 个 不 同 的 部 分 : 


e 核心 DOM - 针对 任何 结构 化 文档 的 标准 模型 
e XML DOM - 针对 XML 文档 的 标准 模型 
e HTML DOM - 针对 HTML 文档 的 标准 模型 


编者 注 : DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 


什么 是 XML DOM? 


XML DOM 定义 了 所 有 XML 元 素 的 对 象 和 属性 ， 以 及 访问 它们 的 方法 。 


如 果 您 需要 学 习 XML DOM， 请 访问 我 们 的 XML DOM 教程 。 


什么 是 HTML DOM ? 


HTML DOM 是 : 


© HTML 的 标准 对 象 模 型 
。 HTML 的 标准 编程 接口 
© W3C 标准 


HTML DOM 定义 了 所 有 HTML 元 素 的 对 象 和 属性 ， 以 及 访问 它们 的 方法 。 


换言之 ，HTML DOM 是 关于 如 何 获取 、 修 改 、 添 加 或 删除 HTML 元 素 的 标准 。 


HTML DOM 节点 


在 HTML DOM 中 ， 所 有 事物 都 是 节点 。DOM 是 被 视 为 节点 树 的 HTML, 


DOM 节点 


根据 W3C 的 HTML DOM 标准 ，HTML 文档 中 的 所 有 内 容 都 是 节点 : 


。 整个 文档 是 一 个 文档 节点 

。 每 个 HTML 元 素 是 元 素 节 点 

。 HTML 元 素 内 的 文本 是 文本 节点 
。 每 个 HTML 属性 是 属性 节点 

。 注释 是 注释 节点 


HTML DOM 节点 树 
HTML DOM 将 HTML 文档 视 作 树 结构 。 这 种 结构 被 称 为 节点 树 : 


HTML DOM Tree 实例 


ae 









<head> <body> 


TR: 
<tithe> 





通过 HTML DOM， 树 中 的 所 有 节点 均 可 通过 JavaScript 进行 访问 。 所 有 HTML 元 素 (7% 
点 ) 均 可 被 修改 ， 也 可 以 创建 或 删除 节点 。 


Pmt, FAA 


节点 树 中 的 节点 彼此 拥有 层级 关系 。 


父 (parent) 、 子 (child) 和 同胞 (sibling) 等 术语 用 于 描述 这 些 关系 。 
同 级 的 子 节点 被 称 为 同胞 (兄弟 或 姐妹 ) 。 


。 在 节点 树 中 ， 项 端 节点 被 称 为 根 (root) 

© 每 个 节点 都 有 父 节点 、 除 了 根 ( 它 没有 父 节 点 ) 
。 一 个 节点 可 拥有 任意 数量 的 子 

。 同胞 是 拥有 相同 父 节 点 的 节点 


下 面 的 图 片 展 示 了 节点 树 的 一 部 分 ， 以 及 节点 之 间 的 关系 : 


parentNode 







TA. 


<html> 的 子 节点 
同时 ， 彼此 互 为 同胞 


nextSibling 





5uigissnoisaad 





lastChild TA: 
<body> 


请 看 下 面 的 HTML 片段 : 


<html> 
<head> 
<title>DOM 教程 </title> 
</head> 
<body> 
<h1>DOM 第 一 课 </h1> 
<p>Hello world!</p> 
</body> 
</html> 


从 上 面 的 HTML 中 : 


e <html> 节点 没有 父 节 点 ; 它 是 根 节 点 
e <head> 和 <body> 的 父 节点 是 <html> 节点 


e MAAR "Hello world!" 的 父 节 点 是 <p> 节点 
并 且 : 


e <html> 节点 拥有 两 个 子 节点 : <head> 和 <body> 

e <head> 节点 拥有 一 个 子 节点 : <title> 节点 

e <title> 节点 也 拥有 一 个 子 节点 : 文本 节点 "DOM 教程 " 

e <h> 和 <p> 节点 是 同胞 节点 ， 同 时 也 是 <body> 的 子 节点 


© <head> 元 素 是 <html> 元 素 的 首 个 子 节点 

e <body> 元 素 是 <html> 元 素 的 最 后 一 个 子 节点 
e <h> TRE <body> 元 素 的 首 个 子 节点 

@ <p> 元 素 是 <body> 元 素 的 最 后 一 个 子 节点 


aoe | 
sf : 


DOM 义理 中 的 常见 


`a 是 希望 


车 误 是 希望 元 素 节 点 包含 文本 。 


在 本 例 中 : <title>DOM AFE </title>, TR $ A <title>， 包 含 值 为 "DOM ME" 的 文本 节点 。 


可 通过 节点 的 innerHTML 属性 来 访问 文本 节点 的 值 。 


CHER ENS 


节 中 学 习 更 多 有 关 innerHTML 属性 的 知识 。 


HTML DOM 方法 


方法 是 我 们 可 以 在 节点 (HTML 元 素 ) 上 执行 的 动作 。 


编程 接口 

可 通过 JavaScript (以 及 其 他 编程 语言 ) 对 HTML DOM 进行 访问 。 
所 有 HTML 元 素 被 定义 为 对 象 ， 而 编程 接口 则 是 对 象 方法 和 对 象 属性 。 
方法 是 您 能 够 执行 的 动作 〈 比 如 添加 或 修改 元 素 ) o 

属性 是 您 能 够 获取 或 设置 的 值 (比如 节点 的 名 称 或 内 容 ) 。 


getElementByld() 方法 


getElementByld() 方法 返回 带 有 指定 ID 的 元 素 : 


F 


var element=document .getElementById("intro"); 


HTML DOM 对 象 - 方法 和 属性 


一 些 常用 的 HTML DOM 方法 : 


e getElementByld(id) - 获取 带 有 指定 id 的 节点 (TR) 
e appendChild(node) - 插入 新 的 子 节点 (TR) 
e removeChild(node) - 删除 子 节点 (TR) 


一 些 常用 的 HTML DOM 属性 : 


e innerHTML- 节点 (TR) 的 文本 值 
e parentNode - 节点 (元 素 ) 的 父 节点 
e childNodes - 节点 (元 素 ) 的 子 节点 
。 attributes - 节点 (元 素 ) 的 属性 节点 


您 将 在 本 教程 的 下 一 章 中 学 到 更 多 有 关 属 性 的 知识 。 


现实 生活 中 的 对 象 

某 个 人 是 一 个 对 象 。 

人 的 方法 可 能 是 eat(), sleep(), work(), play() 等 等 。 

所 有 人 都 有 这 些 方法 ， 但 会 在 不 同时 间 执 行 它们 。 

一 个 人 的 属性 包括 姓名 、 身 高 、 体 重 、 年 龄 、 性 别 等 等 。 
所 有 人 都 有 这 些 属性 ， 但 它们 的 值 因 人 而 异 。 


一 些 DOM 对 象 方法 


这 里 提供 一 些 您 将 在 本 教程 中 学 到 的 常用 方法 : 


方法 描述 
getElementByld() 返回 带 有 指定 ID 的 元 素 。 
` A 此 bda AA IK AA r= == ky 站 占 
有 tas 带 有 指定 标签 名 称 的 所 有 元 素 的 节点 列表 (R 
合 / 节 点 数组 ) o 


getElementsByClassName() ”返回 包含 带 有 指定 类 名 的 所 有 元 素 的 节点 列表 。 


appendChild() 把 新 的 子 节点 添加 到 指定 节点 。 
removeChild() 删除 子 节 点 。 

replaceChild() 替换 子 节点 。 

insertBefore() 在 指定 的 子 节点 前 面 插入 新 的 子 节 点 。 
createAttribute() 创建 属性 节点 。 

createElement() 创建 元 素 节 点 。 

createTextNode() 创建 文本 节点 。 

getAttribute() 返回 指定 的 属性 值 。 


setAttribute() 把 指定 属性 设置 或 修改 为 指定 的 值 。 


HTML DOM 属性 


属性 是 节点 (HTML 元素) 的 值 ， 您 能 够 获取 或 设置 。 


编程 接口 

可 通过 JavaScript (以 及 其 他 编程 语言 ) 对 HTML DOM 进行 访问 。 
所 有 HTML 元 素 被 定义 为 对 象 ， 而 编程 接口 则 是 对 象 方法 和 对 象 属性 。 
方法 是 您 能 够 执行 的 动作 (上 比如 添加 或 修改 元 素 ) o 

属性 是 您 能 够 获取 或 设置 的 值 〈 比 如 节点 的 名 称 或 内 容 ) 。 


innerHTML 属性 


获取 元 素 内 容 的 最 简单 方法 是 使 用 innerHTML 属性 。 
innerHTML 属性 对 于 获取 或 替换 HTML 元 素 的 内 容 很 有 用 。 


实例 


下 面 的 代码 获取 id="intro" 的 <p> 元 素 的 innerHTML : 


实例 


<html> 
<body> 


<p id="intro">Hello World!</p> 

<script> 

var txt=document.getElementById("intro").innerHTML; 
document .write(txt); 

</script> 


</body> 
</html> 


在 上 面 的 例子 中 ，getElementByld 是 一 个 方法 ， 而 innerHTML 是 属性 。 


innerHTML 属性 可 用 于 获取 或 改变 任意 HTML 元 素 ， 包 括 <html> 和 <body>。 


nodeName 属性 


nodeName 属性 规定 节点 的 名 称 。 


e nodeName 是 只 读 的 

。 元 素 节 点 的 nodeName 与 标签 名 相同 

。 属性 节点 的 nodeName 与 属性 名 相同 

。 文本 节点 的 nodeName 始终 是 #text 

e 文档 节点 的 nodeName 始终 是 #document 


注释 : nodeName 始终 包含 HTML 元 素 的 大 写字 母 标 签名 。 


nodeValue 属性 


nodeValue 属性 规定 节点 的 值 。 


© 元 素 节 点 的 nodeValue 是 undefined 或 null 
e 文本 节点 的 nodeValue 是 文本 本 身 
e 属性 节点 的 nodeValue 是 属性 值 


RMIT A 


下 面 的 例子 会 取 回 <p id="intro"> 标签 的 文本 节点 值 : 


实例 


<html> 
<body> 


<p id="intro">Hello World!</p> 

<script type="text/javascript"> 
x=document.getElementById("intro"); 
document .write(x.firstChild.nodeValue); 
</script> 


</body> 
</html> 


nodeType 属性 


nodeType 属性 返回 节点 的 类 型 。nodeType 是 只 读 的 。 


比较 重要 的 节点 类 型 有 : 
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元 素 类 型 NodeType 
元 素 
属性 
文本 
注释 
文档 


—_ 


oO | Ww N 


HTML DOM 属性 


HTML DOM 访问 

访问 HTML DOM - 查找 HTML 元 素 。 
访问 HTML TR (节点 ) 
访问 HTML 元 素 等 同 于 访问 节点 


您 能 够 以 不 同 的 方式 来 访问 HTML 元 素 : 


e 通过 使 用 getElementByld() 方法 
。 通过 使 用 getElementsByTagName() 方法 
。 通过 使 用 getElementsByClassName() 方法 


getElementByld() 方法 
getElementByld() 方法 返回 带 有 指定 ID 的 元 素 : 
语法 

node.getElementById("id"); 
下 面 的 例子 获取 id="intro" 的 元 素 : 


实例 


document .getElementById("intro"); 


getElementsByTagName() 方法 
getElementsByTagName() 返回 带 有 指定 标签 名 的 所 有 元 素 。 
语法 

node .getElementsByTagName("tagname"); 


下 面 的 例子 返回 包含 文档 中 所 有 <p> 元 素 的 列表 : 


实例 1 


document .getElementsByTagName("p"); 


下 面 的 例子 返回 包含 文档 中 所 有 <p> 元 素 的 列表 ， 并 且 这 些 <p> 元 素 应 该 是 id="main" 的 元 
素 的 后 代 ( 子 、 孙 等 等 ) 


实例 2 


document .getElementById("main").getElementsByTagName("p"); 


getElementsByClassName() 方法 
如 果 您 希望 查找 带 有 相同 类 名 的 所 有 HTML 元 素 ， 请 使 用 这 个 方法 : 


document .getElementsByClassName("intro"); 


上 面 的 例子 返回 包含 class="intro" 的 所 有 元 素 的 一 个 列表 : 


注释 : getElementsByClassName() 在 Internet Explorer 5,6,7,8 中 无 效 。 


HTML DOM - 修改 


修改 HTML = 改变 元 素 、 属 性 、 样 式 和 事件 。 


修改 HTML 元 素 


修改 HTML DOM 意味 着 许多 不 同 的 方面 : 


e A% HTML 内 容 

。 改变 CSS 样式 

e 改变 HTML 属性 

创建 新 的 HTML 元 素 
删除 已 有 的 HTML 元 素 
。 改变 事件 (REEF) 


在 接 下 来 的 章节 ， 我 们 会 深入 学 习 修 改 HTML DOM 的 常用 方法 。 


创建 HTML AS 


改变 元 素 内 容 的 最 简 答 的 方法 是 使 用 innerHTML 属性 。 
下 面 的 例子 改变 一 个 <p> 元 素 的 HTML AR : 


实例 


<html> 
<body> 


<p id="pi">Hello world!</p> 
<script> 
document. getElementById("p1i").innerHTML="New text!"; 


</script> 


</body> 
</html> 


提示 : 我 们 将 在 下 面 的 章节 为 您 解释 例子 中 的 细节 。 


改变 HTML 样式 


通过 HTML DOM， 您 能 够 访问 HTML 元 素 的 样式 对 象 。 


下 面 的 例子 改变 一 个 段落 的 HTML 样式 : 


D 


实例 


<html> 


<body> 
<p id="p2">Hello world!</p> 


<script> 
document. getElementById("p2").style.color="blue"; 
</script> 


</body> 
</html> 


创建 新 的 HTML 元 素 


如 需 向 HTML DOM 添加 新 元 素 ， 您 首先 必须 创建 该 元 素 (元 素 节点 ) ， 然 后 把 它 追 加 到 已 有 
的 元 素 上 。 


D 


实例 


A, 


<div id="di"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para=document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node); 


var element=document.getElementById("di"); 
element .appendChild(para); 
</script> 


HTML DOM - 修改 HTML 内 容 


通过 HTML DOM, JavaScript 能 够 访问 HTML 文档 中 的 每 个 元 素 。 


改变 HTML 内 容 


改变 元 素 内 容 的 最 简 答 的 方法 是 使 用 innerHTML 属性 。 
下 面 的 例子 更 改 <p> 元 素 的 HTML 内 容 : 


实例 


<html> 
<body> 


<p id="pi1">Hello world!</p> 
<script> 
document. getElementById("p1i").innerHTML="New text!"; 


</script> 


</body> 
</html> 


改变 HTML 样式 


通过 HTML DOM， 您 能 够 访问 HTML 对 象 的 样式 对 象 。 


下 面 的 例子 更 改 段落 的 HTML 样式 : 


实例 


<html> 


<body> 
<p id="p2">Hello world!</p> 


<script> 
document. getElementById("p2").style.color="blue"; 
</script> 


</body> 
</html> 


使 用 事件 


HTML DOM 允许 您 在 事件 发 生 时 执行 代码 。 

当 HTML 元 素 "* 有 事情 发 生 “ 时 ， 浏 览 器 就 会 生成 事件 : 
。 在 元 素 上 点 击 
。 加 载 页 面 
。 改变 输入 字段 

你 可 以 在 下 一 章 学 习 更 多 有 关 事 件 的 内 容 。 

下 面 两 个 例子 在 按钮 被 点 击 时 改变 <body> 元 素 的 背景 


实例 


<html> 
<body> 


<input type="button" onclick="document.body.style.backgroundColor='lavender';" 
value="Change background color" /> 


</body> 
</html> 


ERAP, ARRATIA : 


实例 


<html> 
<body> 


<script> 
function ChangeBackground( ) 


document .body.style.backgroundColor="lavender"; 
} 


</script> 


<input type="button" onclick="ChangeBackground()" 
value="Change background color" /> 


</body> 
</html> 


下 面 的 例子 在 按钮 被 点 击 时 改变 <p> 元 素 的 文本 : 


实例 


<html> 
<body> 


<p id="pi">Hello world!</p> 

<script> 

function ChangeText() 
有 text!"; 
</script> 


<input type="button" onclick="ChangeText()" value="Change text"> 


</body> 
</html> 


HTML DOM - 元 素 


添加 、 删 除 和 替换 HTML 元 素 。 


创建 新 的 HTML 元 素 - appendChild() 


如 需 向 HTML DOM 添加 新 元 素 ， 您 首先 必须 创建 该 元 素 ， 然 后 把 它 追 加 到 已 有 的 元 素 上 。 


实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para=document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node); 


var element=document.getElementById("divi"); 
element .appendChild(para); 
</script> 


例子 解释 
这 段 代 码 创 建 了 一 个 新 的 <p> 元 素 : 


var para=document.createElement("p"); 


如 需 向 <p> 元 素 添加 文本 ， 您 首先 必须 创建 文本 节点 。 这 段 代 码 创 建文 本 节点 : 


var node=document.createTextNode("This is a new paragraph."); 


para.appendChild(node); 


最 后 ， 您 必须 向 已 有 元 素 追 加 这 个 新 元 素 。 
这 段 代 码 查找 到 一 个 已 有 的 元 素 : 


var element=document.getElementById("divi"); 


这 段 代 码 向 这 个 已 存在 的 元 素 追 加 新 元 素 : 


element .appendChild(para); 


创建 新 的 HTML 元素 -insertBefore(() 


上 一 个 例子 中 的 appendChild() 方法 ， 将 新 元 素 作 为 父 元 素 的 最 后 一 个 子 元 素 进 行 添加 。 


如 果 不 希 望 如 此 ， 您 可 以 使 用 insertBefore() 方法 : 


实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para=document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node); 


var element=document.getElementById("divi"); 
var child=document.getElementById("p1"); 


element .insertBefore(para, child); 
</script> 


删除 已 有 的 HTML 元 素 


如 需 删 除 HTML 元 素 ， 您 必须 清楚 该 元 素 的 父 元 素 : 


4 


实例 


A, 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 

<script> 

var parent=document.getElementById("divi"); 
var child=document.getElementById("p1"); 
parent.removeChild(child); 

</script> 


例子 解释 


这 个 HTML 文档 包含 一 个 带 有 两 个 子 节点 (两 个 <p> 元 素 ) 的 <div> 元 素 : 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


查找 id="div1" 的 元 素 : 


var parent=document.getElementById("div1"); 


查找 id="p1" 的 <p> 元 素 : 


var child=document.getElementById("p1"); 


从 父 元 素 中 删除 子 元 素 : 


parent.removeChild(child); 


提示 : 能 否 在 不 引用 父 元 素 的 情况 下 删除 某 个 元 素 ? 
‘RIDE. DOM 需要 了 解 您 需要 删除 的 元 素 ， 以 及 它 的 父 元 素 。 


这 里 提供 一 个 常用 的 解决 方法 : 找到 您 需要 删除 的 子 元 素 ， 然 后 使 用 parentNode 属性 来 查找 
其 父 元 素 : 


var child=document.getElementById("p1"); 
child.parentNode.removeChild(child); 


替换 HTML 元 素 


如 需 替 换 HTML DOM 中 的 元 素 ， 请 使 用 replaceChild() 方法 : 


实例 


<div id="divi"> 

<p id="pi">This is a paragraph.</p> 

<p id="p2">This is another paragraph.</p> 
</div> 


<script> 

var para=document.createElement("p"); 

var node=document.createTextNode("This is new."); 
para.appendChild(node); 


var parent=document.getElementById("divi"); 
var child=document.getElementById("p1i"); 
parent.replaceChild(para, child); 

</script> 
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HTML DOM - 事件 


HTML DOM 允许 JavaScript 对 HTML 事件 作出 反应 。。 
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实例 


<div style="background-color :#8AB83D;width:160px; height : 60px; 
margin: 20px; padding-top: 20px; color: #fffffFf; font-weight : bold; 
font-size:14px; float: left; text-align:center;" 
Onmouseover="this.innerHTML='Thank You'" 
onmouseout="this.innerHTML='Mouse Over Me'">Mouse Over Me</div> 


<div style="background-color :#8AB83D;width:160px; height : 60px; 
margin: 20px; padding-top: 20px; color: #fffffFf; font-weight: bold; 
font-size:14px; float: left; text-align:center;" 
onclick="clickMeEvent(this)">Click Me</div> 


<script type="application/javascript"> 
<li 


function clickMeEvent (obj) 


if (obj .innerHTML=="Goodbye" ) 


{ 
obj.style.display="none"; 
} 

else if (obj.innerHTML=="Thank You") 
{ 
obj .innerHTML="Goodbye"; 
} 

else if (obj.innerHTML=="Click Me<br>Click Me Again<br>And Again") 
{ 
obj .innerHTML="Thank You"; 
} 

else if (obj.innerHTML=="Click Me<br>Click Me Again") 
{ 
obj .innerHTML=obj.innerHTML+"<br>And Again"; 
} 

else 
{ 
obj .innerHTML=0bj .innerHTML+"<br>Click Me Again"; 
} 

} 

//--> 

</script> 


对 事件 作出 反应 


当 事 件 发 生 时 ， 可 以 执行 JavaScript， 上 比如 当 用 户 点 击 一 个 HTML 元 素 时 。 


如 需 在 用 户 点 击 某 个 元 素 时 执行 代码 ， 请 把 JavaScript 代码 添加 到 HTML 事件 属性 中 : 


onclick=_JavaScript_ 


HTML 事件 的 例子 : 


。 4A P rad Barat 

。 当 网 页 已 加 载 时 

。 当 图 片 已 加 载 时 

。 当 鼠 标 移动 到 元 素 上 时 
。 当 输 入 字段 被 改变 时 
。 当 HTML 表单 被 提交 时 
。 当 用 户 触发 按键 时 


在 本 例 中 ， 当 用 户 点 击 时 ， 会 改变 <h1> 元 素 的 内 容 : 


实例 


<!DOCTYPE html> 

<html> 

<body> 

<h1 onclick="this.innerHTML='hel1ol'"> 请 点 击 这 段 文本 !</h1> 
</body> 

</html> 


EAGIA, RUFFE HAARR : 


实例 


<!DOCTYPE html> 

<html> 

<head> 

<script> 

function changetext(id) 


{ 
id.innerHTML="hello!"; 
} 


</script> 

</head> 

<body> 

<h1 onclick="changetext (this) ">i md 3X RAI </hi> 
</body> 

</html> 


HTML 事件 属性 


如 需 向 HTML 元 素 分 配 事件 ， 您 可 以 使 用 事件 属性 。 


实例 
向 button 元 素 分 配 一 个 onclick 事件 : 


<button onclick="displayDate()"> 试 一 试 </button> 


在 上 面 的 例子 中 ， 当 点 击 按钮 时 ， 会 执行 名 为 displayDate HRA, 


使 用 HTML DOM 来 分 配 事件 

HTML DOM 人 允许 您 使 用 JavaScript 向 HTML 元 素 分 配 事件 : 
实例 

为 button 元 素 分 配 onclick 事件 : 


<script> 
document .getElementById("myBtn").onclick=function(){displayDate()}; 
</script> 


在 上 面 的 例子 中 ， 名 为 displayDate 的 函数 被 分 配给 了 id=myButn" 的 HTML 元 素 。 
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onload 和 onunload 事件 


当 用 户 进 入 或 离开 页 面 时 ， 会 触发 onload 和 onunload 事件 。 


onload 事件 可 用 于 检查 访客 的 浏览 器 类 型 和 版 本 ， 以 便 基 于 这 些 信 息 来 加 载 不 同 版 本 的 网 
页 。 


onload 和 onunload 事件 可 用 于 人 处理 cookies. 


实例 


<body onload="checkCookies()"> 


onchange 事件 


onchange 事件 常用 于 输入 字段 的 验证 。 


下 面 的 例子 展示 了 如 何 使 用 onchange。 当 用 户 改 变 输 入 字段 的 内 容 时 ， 将 调用 upperCase() 
WAX. 


实例 


<input type="text" id="fname" onchange="upperCase()"> 


onmouseover 和 onmouseout 事件 


onmouseover 和 onmouseout 事件 可 用 于 在 鼠标 指针 移动 到 或 离开 元 素 时 触发 西数 。 


实例 
一 个 简单 的 onmouseover-onmouseout 例子 : 


<div style="background-color :#8AB83D;width:150px; height : 60px; 
margin: 20px; padding-top: 20px;color:#fffffFf; font-weight: bold; 
font-size:18px;text-align:center;" onmouseover="this.innerHTML=' #1i#1'" onmouseout="this. ir 


<p class="tiy"><a target="_blank" href="/tiy/t.asp?f=dom_event_onmouseover"># Bix—iX</a>< 
</div> 


OSS] 








onmousedown, onmouseup 以 及 onclick 事件 


onmousedown、onmouseup 以 及 onclick 事件 是 鼠标 点 击 的 全 部 过 程 。 首 先 当 某 个 鼠标 按钮 
被 点 击 时 ， 触 发 onmousedown 事件 ， 然 后 ， 当 饥 标 按钮 被 松 开 时 ， 会 触发 onmouseup 事 
件 ， 最 后 ， 当 鼠标 点 击 完成 时 ， 触 发 onclick 事件 。 


实例 
一 个 简单 的 onmousedown-onmouseup 实例 : 


<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#8AB83D;widt 
margin:20px;padding-top:20px;color:#ffffff;font-weight:bold; 
font-size:18px;text-align:center;"> 点 击 这 里 </div> 


<script type="application/javascript"> 
< 
function mDown(obj) 


{ 
obj.style.backgroundColor="#1ec5e5"; 
obj .innerHTML=" 松 开 鼠 标 " 


function mUp(obj) 


{ 
obj.style.backgroundColor="#8AB83D"; 
obj . innerHTML=" #t34t" 

} 


//--> 
</script> 
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如 需 每 个 事件 的 完整 描述 和 例子 ， 请 访问 我 们 的 HTML DOM 参考 手册 。 


HTML DOM - 导航 


通过 HTML DOM， 您 能 够 使 用 节点 关系 在 节点 树 中 导航 。 


HTML DOM 节点 列表 
getElementsByTagName() 方法 返回 节点 列表 。 节 点 列表 是 一 个 节点 数组 。 


下 面 的 代码 选取 文档 中 的 所 有 <p> 节点 : 


实例 


var x=document.getElementsByTagName("p"); 


可 以 通过 下 标号 访问 这 些 节 点 。 如 需 访问 第 二 个 <p>， 您 可 以 这 么 写 : 


y=x[1]; 


注释 : 下 标号 从 0 开始 。 


HTML DOM 节点 列表 长 度 


length 属性 定义 节点 列表 中 节点 的 数量 。 


您 可 以 使 用 length 属性 来 循环 节点 列表 : 


实例 


x=document .getElementsByTagName("p"); 


for (i=0;i<x.length;i++) 


{ 


document .write(x[i].innerHTML); 
document .write("<br />"); 


} 


例子 解释 : 


。 获取 所 有 <p> 元 素 节 点 
。 输出 每 个 <p> 元 素 的 文本 节点 的 值 


导航 节点 关系 


您 能 够 使 用 三 个 节点 属性 : parentNode、firstChild 以 及 lastChild ， 在 文档 结构 中 进行 导航 。 


请 看 下 面 的 HTML 片段 : 
<html> 
<body> 
<p>Hello World!</p> 
<div> 
<p>DOM 很 有 用 !</p> 
<p> 本 例 演示 节点 关系 。</p> 


</div> 


</body> 
</html> 


。 HD <> 元 素 是 <body> 元 素 的 首 个 子 元 素 (firstChild) 
e <div> DRE <body> 元 素 的 最 后 一 个 子 元 素 (lastChild) 
e <body> READ <p 元 素 和 <div> 元 素 的 父 节 点 (parentNode) 


firstChild 属性 可 用 于 访问 元 素 的 文本 : 


实例 


<html> 
<body> 


<p id="intro">Hello World!</p> 
<script> 
x=document.getElementById("intro"); 
document .write(x.firstChild.nodeValue); 
</script> 


</body> 
</html> 
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这 里 有 两 个 特殊 的 属性 ， 可 以 访问 全 部 文档 : 


e document.documentElement - 全 部 文档 
e document.body - 文档 的 主体 


实例 


<html> 
<body> 


<p>Hello World!</p> 

<div> 

<p>DOM RAA ! </p> 

<p> 本 例 演示 <b>document.body</b> 属性 。</p> 
</div> 

<script> 

alert(document.body.innerHTML); 

</script> 


</body> 
</html> 


childNodes 和 nodeValue 


除了 innerHTML 属性 ， 您 也 可 以 使 用 childNodes 和 nodeValue 属性 来 获取 元 素 的 内 容 。 


下 面 的 代码 获取 id="intro" 的 <p> 元 素 的 值 : 


实例 


<html> 
<body> 


<p id="intro">Hello World!</p> 

<script> 

var txt=document.getElementById("intro").childNodes[0].nodeValue; 
document .write(txt); 

</script> 


</body> 
</html> 


在 上 面 的 例子 中 ，getElementByld 是 一 个 方法 ， 而 childNodes 和 nodeValue 是 属性 。 


在 本 教程 中 ， 我 们 将 使 用 innerHTML 属性 。 不 过 ， 学 习 上 面 的 方法 有 助 于 对 DOM 树 结构 和 
导航 的 理解 。 


JavaScript HTML DOM EventListener 
addEventListener() 方法 


实例 
点 用 户 点 击 按钮 时 触发 监听 事件 : 


document .getElementById("myBtn").addEventListener("click", displayDate); 


addEventListener() 方法 用 于 向 指定 元 素 添 加 事件 句柄 。 

addEventListener() 方法 添加 的 事件 句柄 不 会 覆盖 已 存在 的 事件 句柄 。 

你 可 以 向 一 个 元 素 添 加 多 个 事件 句柄 。 

你 可 以 向 同 个 元 素 添 加 多 个 同类 型 的 事件 句柄 ， 如 : 两 个 "click" 事件 。 

你 可 以 向 任何 DOM 对 象 添加 事件 监听 ， 不 仅仅 是 HTML 元 素 。 如 : window 对 象 。 
addEventListener() 方法 可 以 更 简单 的 控制 事件 ( 冒 泡 与 捕获 ) 。 


当 你 使 用 addEventListener() 方法 时 , JavaScript 从 HTML 标记 中 分 离开 来 ， 可 读 性 更 强 ， 
在 没有 控制 HTML 标 记 时 也 可 以 添加 事件 监听 。 


你 可 以 使 用 removeEventListener() 方法 来 移 除 事件 的 监听 。 


语法 

element.addEventListener(event, function, useCapture); 
第 一 个 参数 是 事件 的 类 型 (如 "click" 或 "mousedown'"). 
第 二 个 参数 是 事件 触发 后 调用 的 函数 。 


第 三 个 参数 是 个 布尔 值 用 于 描述 事件 是 冒 泡 还 是 捕获 。 该 参数 是 可 选 的 。 














9 注意 :不 要 使 用 "on" 前 级 。 例如 ， 使 用 "click" ,而 不 是 使 用 "onclick"。 


向 原 元 素 添 加 事件 句柄 


实例 
当 用 户 点 击 元 素 时 弹出 "Hello World!" : 


_element_.addEventListener("click", function(){ alert("Hello World!"); }); 


你 可 以 使 用 函数 名 ， 来 引用 外 部 图 数 : 


实例 
当 用 户 点 击 元 素 时 弹出 "Hello World!" : 


_element_.addEventListener("click", myFunction); 


function myFunction() { 
alert ("Hello World!"); 
} 


向 同 一 个 元 素 中 添加 多 个 事件 句柄 


addEventListener() 方法 允许 向 同 个 元 素 添 加 多 个 事件 ， 且 不 会 覆盖 已 存在 的 事件 : 


实例 


_element_.addEventListener("click", myFunction); 
_element_.addEventListener("click", mySecondFunction) ; 


你 可 以 向 同 个 元 素 添 加 不 同类 型 的 事件 : 


实例 


_element_.addEventListener("mouseover", myFunction); 
_element_.addEventListener("click", mySecondFunction) ; 
_element_.addEventListener("mouseout", myThirdFunction); 


向 Window 对 象 添加 事件 句柄 


addEventListener() 方法 允许 你 在 HTML DOM 对 象 添加 事件 监听 ， HTML DOM 对 象 如 : 
HTML 元 素 , HTML 文档 , window 对 象 。 或 者 其 他 支出 的 事件 对 象 如 : xmiHttpRequest 对 象 。 


实例 
当 用 户 重 置 窗口 大 小 时 添加 事件 监听 : 


window. addEventListener("resize", function(){ 
document .getElementById("demo").innerHTML = _sometext_; 


3); 


传递 参数 


当 传 递 参 数值 时 ， 使 用 "匿名 男 数 "调用 带 参 数 的 男 数 : 


实例 


_element_.addEventListener("click", function(){ myFunction(p1, p2); }); 


事件 冒 泡 或 事件 捕获 ? 
事件 传递 有 两 种 方式 : 冒 泡 与 捕获 。 


事件 传递 定义 了 元 素 事件 触发 的 顺序 。 如 果 你 将 <p> 元 素 插入 到 <div> 元 素 中 ， 用 户 点 击 
<p> 元 素 , 哪个 元 素 的 "click" 事件 先 被 触发 呢 ? 


在 冒 泡 中 ， 内 部 元 素 的 事件 会 先 被 触发 ， 然 后 再 触发 外 部 元 素 ， 即 : <p> 元 素 的 点 击 事件 先 
触发 ， 然 后 会 触发 <div> 元 素 的 点 击 事件 。 


在 捕获 中 ， 外 部 元 素 的 事件 会 先 被 触发 ， 然 后 才 会 触发 内 部 元 素 的 事件 ， 即 : <div> 元 素 的 
点 击 事件 先 触 发 ， 然 后 再 触发 <p> 元 素 的 点 击 事件 。 


addEventListener() 方法 可 以 指定 "useCapture" 参数 来 设置 传递 类 型 : 
addEventListener(event, function, useCapture); 


默认 值 为 false, 及 冒 泡 传递 ， 当 值 为 true 时 , 事件 使 用 捕获 传递 。 


实例 


document .getElementById("myDiv").addEventListener("click", myFunction, true); 


removeEventListener() 方法 


removeEventListener() 方法 移 除 由 addEventListener() 方法 添加 的 事件 句柄 : 


实例 


_element_.removeEventListener("mousemove", myFunction); 


浏览 器 支持 


表格 中 的 数字 表示 支持 该 方法 的 第 一 个 浏览 器 的 版 本 号 。 


方法 
addEventListener() 1.0 9.0 1.0 1.0 7.0 
removeEventListener() 1.0 9.0 1.0 1.0 7.0 


注意 : IE 8 及 更 早 IE 版 本 ，Opera 7.0 及 其 更 早 版 本 不 支持 addEventListener() 和 
removeEventListener() 方法 。 但 是 ， 对 于 这 类 浏览 器 版 本 可 以 使 用 detachEvent() 方法 来 移 
除 事件 句柄 : 


element.attachEvent(event, function); 
element.detachEvent(event, function); 


实例 
跨 浏览 器 解决 方法 : 


var x = document.getElementById("myBtn"); 


if (x.addEventListener) { // 所 有 主流 浏览 器 ， 除 了 IE 8 及 更 早 版 本 
x.addEventListener("click", myFunction) ; 
} else if (x.attachEvent) { // TE 8 及 更 早 版 本 


x.attachEvent("onclick", myFunction); 


} 


HTML DOM 事件 对 象 参 考 手册 


所 有 HTML DOM 事件 ， 可 以 查看 我 们 完整 的 HTML DOM Event 对 象 参考 手册 。 


AJAX 教程 


AJAX 简介 


AJAX 是 一 种 在 无 需 重 新 加 载 整个 网 页 的 情况 下 ， 能 够 更 新 部 分 网 页 的 技术 。 


您 应 当 具 备 的 基础 知识 
在 继续 学 习 之 前 ， 您 需要 对 下 面 的 知识 有 基本 的 了 解 


e HTML/XHTML 
e CSS 
e JavaScript / DOM 


如 果 您 希望 首先 学 习 这 些 项 目 ， 请 在 我 们 的 首页 访问 这 些 教程 。 


什么 是 AJAX ? 
AJAX = 异步 JavaScript 和 XML. 


AJAX 是 一 种 用 于 创建 快速 动态 网 页 的 技术 。 


通过 在 后 台 与 服务 器 进行 少量 数据 交换 ，AJAX 可 以 使 网 页 实现 异步 更 新 。 这 意味 着 可 以 在 不 
重新 加 载 整个 网 页 的 情况 下 ， 对 网 页 的 某 部 分 进行 更 新 。 


传统 的 网 页 (不 使 用 AJAX) 如 果 需 要 更 新 内 容 ， 必 需 重 载 整个 网 页 面 。 
有 很 多 使 用 AJAX 的 点 用 程序 案例 : 新 浪 微 博 、Google 地 图 、 开 心 网 等 等 。 


Google Suggest 


在 2005 Æ, Google 通过 其 Google Suggest 使 AJAX 变 得 流行 起 来 。 
Google Suggest 使 用 AJAX 创造 出 动态 性 极 强 的 web 界面 : 当 您 在 谷歌 的 搜索 框 输入 关键 字 
at, JavaScript 会 把 这 些 字符 发 送 到 服务 器 ， 然 后 服务 器 会 返回 一 个 搜索 建议 的 列表 。 


SRF hale AA AJAX 


AJAX 基于 已 有 的 标准 。 这 些 标准 已 被 大 多 数 开发 者 使 用 多 年 。 


请 阅读 下 一 章 ， 看 看 AJAX 是 如 何 工作 的 ! 


AJAX 实例 


。 XHR 创建 对 象 


为 了 帮助 您 理解 AJAX 的 工作 原理 ， 我 们 创建 了 一 个 小 型 的 AJAX 应 用 程序 。 


实例 


<div id="myDiv"><p>AJAX is not a programming language.</p> 
<p>It is just a technique for creating better and more interactive web applications.</p>< 
<button type="button" onclick="loadXMLDoc()"> 通 过 AJAX 改变 内 容 </button> 


OOS SS See 





AJAX 实例 解释 


上 面 的 AJAX 应 用 程序 包含 一 个 div 和 一 个 按钮。 


div 部 分 用 于 显示 来 自 服 务 器 的 信息 。 当 按钮 被 点 击 时 ， 它 负责 调用 名 为 loadXMLDoc() HH 
数 : 


<html> 
<body> 


<div id="myDiv"><h3>Let AJAX change this text</h3></div> 
<button type="button" onclick="loadXMLDoc()">Change Content</button> 


</body> 
</html> 


接 下 来 ， 在 页 面 的 head 部 分 添加 一 个 <script> 标签 。 该 标签 中 包含 了 这 个 loadXMLDoc() K 
数 : 


<head> 
<script type="text/javascript"> 
function loadXMLDoc() 


. AJAX script goes here ... 
} 


</script> 
</head> 


下 面 的 章节 会 为 您 讲解 AJAX 的 工作 原理 。 


e XHR 创建 对 象 


AJAX - 创建 XMLHttpRequest 对 象 


e XHR 请 求 


XMLHttpRequest 是 AJAX 的 基础 。 


XMLHttpRequest 对 象 


所 有 现代 浏览 器 均 支持 XMLHttpRequest 对 象 (IE5 和 IE6 使 用 ActiveXObject) 。 


XMLHttpRequest 用 于 在 后 台 和 与 服务 器 交换 数据 。 这 意味 着 可 以 在 不 重新 加 载 整个 网 页 的 情况 
下 ， 对 网 页 的 某 部 分 进行 更 新 。 


创建 XMLHttpRequest 对 象 


所 有 现代 浏览 器 (IE7+, Firefox, Chrome, Safari 以 及 Opera) 均 内 建 XMLHttpRequest 对 
象 。 


创建 XMLHttpRequest 对 象 的 语法 : 


variable=new XMLHttpRequest(); 


老 版 本 的 Internet Explorer (IE5 和 1E6) 使 用 ActiveX 对 象 : 


variable=new ActivexObject("Microsoft.XMLHTTP"); 


为 了 应 对 所 有 的 现代 浏览 器 ， 包 括 IE5 和 1IE6， 请 检查 浏览 器 是 否 支 持 XMLHttpRequest 对 
象 。 如 果 支 持 ， 则 创建 XMLHttpRequest 对 象 。 如 果 不 支持 ， 则 创建 ActiveXObject : 


var xmlhttp; 

if (window.XMLHttpRequest ) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest (); 


else 
{// code for IE6, IE5 
xmlhttp=new ActivexObject("Microsoft.XMLHTTP"); 


在 下 一 章 中 ， 您 将 学 习 发 送 服务 器 请 求 的 知识 。 


e XHR 请 求 


W3School JavaScript & jQuery 教程 


AJAX - 创建 XMLHttpRequest xt 166 


AJAX - 回 服 务 右 发 送 请 求 
。 XHR 创建 对 象 
e XHR 响应 


XMLHttpRequest 对 象 用 于 和 服务 器 交换 数据 。 


各 服务 器 发 送 请 求 
如 需 将 请 求 发 送 到 服务 器 ， 我 们 使 用 XMLHttpRequest xt RAY open() 和 send() 方法 : 


xmlhttp.open("GET", "test1i.txt", true); 
xmlhttp.send(); 


方法 描述 
规定 请 求 的 类 型 、URL 以 及 是 否 异 步 处 理 请 求 。 method : 请 


open(method,url,async) ” 求 的 类 型 ; GET 或 POST url : 文件 在 服务 器 上 的 位 置 
async : true (异步 ) 或 false (同步 ) 


send(string) 将 请 求 发 送 到 服务 器 。 string : 公用 于 POST 请 求 


GET 还 是 POST? 
与 POST 相 比 ，GET 更 简单 也 更 快 ， 并 且 在 大 部 分 情况 下 都 能 用 。 


然而 ， 在 以 下 情况 中 ， 请 使 用 POST 请 求 : 

。 无 法 使 用 缓存 文件 (更 新 服务 器 上 的 文件 或 数据 库 ) 

。 向 服务 器 发 送 大 量 数据 (POST 没有 数据 量 限制 ) 

© 发 送 包 含 未 知 字符 的 用 户 输入 时 ，POST 比 GET 更 稳定 也 更 可 靠 
GET 请 求 
一 个 简单 的 GET 请 求 : 


xmLhttp.open("GET", "demo_get.asp", true); 
xmlhttp.send(); 


在 上 面 的 例子 中 ， 您 可 能 得 到 的 是 缓存 的 结果 。 


为 了 避免 这 种 情况 ， 请 向 URL 添加 一 个 唯一 的 ID : 


xmlhttp.open("GET", "demo_get.asp?t=" + `Math.random()`,true); 
xmlhttp.send(); 


如 果 您 希望 通过 4 GET 方法 发 送 关 信 息 ， 15 |P 青 向 URL 添加 信息 : 


xmlhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true); 
xmlhttp.send(); 


POST 请 求 


一 个 简单 POST 请 求 : 


xmlhttp.open("POST", "demo_post.asp", true); 
xmlhttp.send(); 


如 果 需 要 像 HTML RY ABE es 数据 ， 请 使 用 setRequestHeader() 来 添加 HTTP 头 。 
后 在 send() 方法 中 规定 您 希望 发 送 的 数据 : 


xmlhttp.open("POST", "ajax_test.asp", true); 
xmlhttp.setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Bill&lname=Gates") ; 


方法 描述 


向 请 求 添加 HTTP 头 。 header. 规定 头 的 名 称 


setRequestHeader(header, value) value: 规定 头 的 值 


url - 服务 器 上 的 文件 
open() 方法 的 url 参数 是 服务 器 上 文件 的 地 址 : 


xmlhttp.open("GET", "ajax_test.asp", true); 


该 文件 可 以 是 任何 类 型 的 文件 ， 比 如 .txt 和 .xml， 或 者 服务 器 脚本 文件 ， 比 如 .asp 和 .php 
(在 传 回 响应 之 前 ， 能 够 在 服务 器 上 执行 任务 ) 。 


异步 - True 或 False ? 


AJAX 指 的 是 异步 JavaScript 和 XML (Asynchronous JavaScript and XML) 。 


XMLHttpRequest 对 象 如 果 要 用 于 AJAX 的 话 ， 其 open() 方法 的 async 参数 必须 设置 为 
true : 


xmlhttp.open("GET", "ajax_test.asp", true); 


对 于 web 开发 人 员 来 说 ， 发 送 异 步 请 求 是 一 个 巨大 的 进步 。 很 多 在 服务 器 执行 的 任务 都 相当 
费时 。AJAX 出 现 之 前 ， 这 可 能 会 引起 应 用 程序 挂 起 或 停止 。 


通过 AJAX，JavaScript 无 需 等 待 服务 器 的 响应， 而 是 : 


。 在 等 待 服务 器 响应 时 执行 其 他 脚本 
e 当 响 应 就 绪 后 对 响应 进行 处 理 


Async = true 


当 使 用 async=true 时 ， 请 规定 在 响应 处 于 onreadystatechange 事件 中 的 就 绪 状 态 时 执行 的 
RN : 


xmlhttp.onreadystatechange=function() 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 


document .getElementById("myDiv") .innerHTML=xmlhttp.responseText; 
} 


} 
xmlhttp.open("GET", "test1.txt", true); 
xmlhttp.send(); 


您 将 在 稍 后 的 章节 学 习 更 多 有 关 onreadystatechange HAA. 


Async = false 


如 需 使 用 async=false， 请 将 open) 方法 中 的 第 三 个 参数 改 为 false : 


xmlhttp.open("GET", "test1.txt", false); 


我 们 不 推荐 使 用 async=false， 但 是 对 于 一 些小 型 的 请 求 ， 也 是 可 以 的 。 


请 记 住 ，JavaScript 会 等 到 服务 器 响应 就 绪 才 继续 执行 。 如 果 服 务 器 繁忙 或 缓慢 ， 应 用 程序 
会 挂 起 或 停止 。 


注释 : 当 您 使 用 async=false 时 ， 请 不 要 编写 onreadystatechange 函数 - 把 代码 放 到 send() 
语句 后 面 即 可 : 


xmlhttp.open("GET", "test1.txt", false); 
xmlhttp.send(); 
document. getElementById("myDiv").innerHTML=xmlhttp.responseText; 
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AJAX - 服务 强 响 应 


。 XHR 请 求 
e XHR readyState 


服务 三 响应 


如 需 获 得 来 自 服务 器 的 响应 ， 请 使 用 XMLHttpRequest 对 象 的 responseText 或 
responseXML 属性 。 


属性 描述 
responseText 获得 字符 串 形式 的 响应 数据 。 
responseXML 获得 XML 形式 的 响应 数据 。 


responseText 属性 


如 果 来 自 服务 器 的 响应 并 非 XML， 请 使 用 responseText 属性 。 
responseText 属性 返回 字符 串 形式 的 响应 ， 因 此 您 可 以 这 样 使 用 : 


document .getElementById("myDiv").innerHTML=xmlhttp.responseText; 


responseXML 属性 


如 果 来 自 服务 器 的 响应 是 XML， 而 且 需 要 作为 XML 对 象 进行 解析 ， 请 使 用 responseXML 属 
性 : 


请 求 books.xml 文件 ， 并 解析 响应 : 


xmlDoc=xmlhttp.responseXML ; 
txts" me 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++) 
{ 
txt=txt + x[i].childNodes[0].nodeValue + "<br />"; 


document .getElementById("myDiv").innerHTML=txt; 


。 XHR 请 求 
e XHR readyState 


AJAX - onreadystatechange 事件 


e XHR 响应 


onreadystatechange 事件 


当 请 求 被 发 送 到 服务 器 时 ， 我 们 需要 执行 一 些 基 于 响应 的 任务 。 
每 当 readyState 改变 时 ， 就 会 触发 onreadystatechange 事件 。 
readyState 属性 存 有 XMLHttpRequest 的 状态 信息 。 
Fill XMLHttpRequest 对 象 的 三 个 重要 的 属性 : 
属性 描述 
onreadystatechange (SVE) ， 每 当 readyState 属性 改变 时 ， 束 会 调用 


存 有 XMLHttpRequest 的 状态 。 从 0 到 4 发 生变 化 。 0: 请 求 未 


readyState 初始 化 1: 服务 器 连接 已 建立 2: 请 求 已 接收 3: 请 求 处 理 中 4: 请 
求 已 完成 ， 且 响应 已 就 绪 
status 200: "OK" 404: 未 找到 页 面 


在 onreadystatechange 事件 中 ， 我 们 规定 当 服 务 器 响应 已 做 好 宦 外 理 的 准备 时 所 执行 的 任 
务 。 


当 readyState 等 于 4 且 状 态 为 200 时 ， 表 示 响 应 已 就 绪 : 


xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 


document .getElementById("myDiv").innerHTML=xmlhttp.responseText; 


注释 : onreadystatechange 事件 被 触发 5 次 (0 - 4) ， 对 应 着 readyState 的 每 个 变化 。 


使 用 Callback 函数 


callback 函数 是 一 种 以 参数 形式 传递 给 另 一 个 图 数 的 函数 。 


如 果 您 的 网 站 上 存在 多 个 AJAX 任务 ， 那 么 您 应 该 为 创建 XMLHttpRequest 对 象 编写 一 个 标 
准 的 函数 ， 并 为 每 个 AJAX 任务 调用 该 函数 。 


该 加 数 调 用 应 该 包含 URL 以 及 发 生 onreadystatechange 事件 时 执行 的 任务 (每 次 调用 可 能 
不 尽 相同 ) 


function myFunction() 
loadXMLDoc("ajax_info.txt",function() 
(xmlhttp.readyState==4 && xmlhttp.status==200) 
document .getElementById("myDiv").innerHTML=xmlhttp.responseText; 


} 
}); 
} 


e XHR 响应 


AJAX ASP/PHP 请 求实 例 


e XHR readyState 


AJAX 用 于 创造 动态 性 更 强 的 应 用 程序 。 


AJAX ASP/PHP 实例 


下 面 的 例子 将 为 您 演示 当 用 户 在 输入 框 中 键入 字符 时 ， 网 页 如 何 与 web 服务 器 进行 通信 


<p> 请 在 下 面 的 输入 框 中 键入 字母 (A - Z) : </p> 


<form action="" style="margin-top:15px;"> 
姓氏 : <input id="txt1" onkeyup="showHint(this.value)" type="text"> 
</form> 


<p> 建 议 : <span id="txtHint"></span></p> 


实例 解释 - showHint() WAX 


当 用 户 在 上 面 的 输入 框 中 键入 字符 时 ， 会 执行 图 数 "showHint()" 。 该 男 数 由 "onkeyup" 事件 
触发 : 


function showHint(str) 


var xmlhttp; 
if (str.length==0) 


document .getElementById("txtHint").innerHTML=""; 
return, 


} 

if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 


} 


else 

{// code for IE6, IES 

xmlhttp=new ActiveXobject("Microsoft .XMLHTTP" ) ; 
xmlhttp.onreadystatechange=function( ) 


{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 


document .getElementById("txtHint").innerHTML=xmlhttp.responseText,; 
} 


xmlhttp.open("GET", "gethint.asp?q="+str, true); 
xmlhttp.send(); 
} 


源 代码 解释 : 


如 果 输 入 框 为 空 (strlength==0)， 则 该 函数 清空 txtHint 占 位 符 的 内 容 ， 并 退出 函数 。 
如 果 输 入 框 不 为 空 ，showHint() 函数 执行 以 下 任务 : 


。 创建 XMLHttpRequest 对 象 

。 当 服 务 器 响应 就 绪 时 执行 男 数 

。 把 请 求 发 送 到 服务 器 上 的 文件 

。 请 注意 我 们 向 URL 添加 了 一 个 参数 q 〈 带 有 输入 框 的 内 容 ) 


AJAX fk 42s n E - ASP 和 PHP 


由 上 面 的 JavaScript 调用 的 服务 器 页 面 是 ASP 文件， 名 为 "gethint.asp"。 
下 面 ， 我 们 创建 了 两 个 版 本 的 服务 器 文件 ， 一 个 用 ASP 编写 ， 另 一 个 用 PHP 编写 。 


ASP 文件 


"gethint.asp" 中 的 源 代码 会 检查 一 个 名 字数 组 ， 然 后 向 浏览 器 返回 相应 的 名 字 : 


<% 

response. expires=-1 
dim a(30) 

' 用 名 字 来 填充 数组 
a(1)="Anna" 
a(2)="Brittany" 
a(3)="Cinderella" 
a(4)="Diana" 


a(5)="Eva" 
a(6)="Fiona" 
a(7)="Gunda" 
a(8)="Hege" 
a(9)="Inga" 


a(10)="Johanna" 
a(11)="Kitty" 
a(12)="Linda" 
a(13)="Nina" 
a(14)="Ophelia" 
a(15)="Petunia" 
a(16)="Amanda" 
a(17)="Raquel" 
a(18)="Cindy" 
a(19)="Doris" 
a(20)="Eve" 
a(21)="Evita" 
a(22)="Sunniva" 


a(23)="Tove" 
a(24)="Unni" 
a(25)="Violet" 
a(26)="Liza" 


a(27)="Elizabeth" 
a(28)="Ellen" 
a(29)="Wenche" 
a(30)="Vicky" 


' 获 得 来 自 URL 的 q 参数 
q=ucase(request.querystring("q")) 


' 如 果 q 大 于 9， 则 查找 数组 中 的 所 有 提示 
if len(q)>0 then 
hint="" 
for i=1 to 30 
if q=ucase(mid(a(i),1,len(q))) then 
if hint="" then 
hint=a(i) 
else 
hint=hint &" , " & a(i) 
end if 
end if 
next 
end if 


“如果 未 找到 提示 ， 则 输出 "no suggestion" 
' 否则 输出 正确 的 值 
if hint="" then 

response.write("no suggestion") 
else 

response.write(hint) 
end if 
%> 


PHP 文件 


下 面 的 代码 用 PHP 编写 ， 与 上 面 的 ASP 代码 作用 是 一 样 的 。 


注释 : 如 需 在 PHP 中 运行 这 个 例子 ， 请 闻 url 变量 的 值 (Javascript 代码 中 ) 由 "gethint.asp" 
改 为 "gethint.php"。 


<?php 

// 用 名 字 来 填充 数组 
$a[]="Anna"; 
$a[]="Brittany"; 
$a[]="Cinderella"; 
$a[]="Diana"; 
$a[]="Eva"; 
$a[]="Fiona"; 
$a[]="Gunda"; 
$a[]="Hege" > 
$a[]="Inga" > 
$a[]="Johanna"; 
$a[]="Kitty"; 
$a[]="Linda"; 
$a[]="Nina"; 
$a[]="0phelia"; 
$a[]="Petunia"; 
$a[]="Amanda"; 
$a[]="Raquel"; 
$a[]="Cindy"; 
$a[]="Doris"; 
$a[]="Eve"; 
$a[]="Evita"; 
$a[]="Sunniva"; 
$a[]="Tove"; 
$a[]="Unni"; 
$a[]="Violet"; 
$a[]="Liza"; 
$a[]="Elizabeth"; 
$a[]="Ellen"; 
$a[]="Wenche"; 
$a[]="Vicky"; 


// 获 得 来 自 URL 的 q 参数 
$q=$_GET["q"]; 


// 如 果 q AF 9， 则 查找 数组 中 的 所 有 提示 
if (strlen($q) > 0) 
{ 


$hint=""; 
for($i=0; $i<count($a); $i++) 


{ 
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q) ))) 
{ 
if ($hint=="") 
{ 
$hint=$a[$i]; 
else 
{ 
$hint=$hint." , ".$a[$i]; 
} 
} 
} 
} 
// 如 果 未 找到 提示 ， 则 把 输出 设置 为 "no suggestion" 
// 否则 设置 为 正确 的 值 
if ($hint == "") 
$response="no suggestion"; 


else 


$response=$hint; 


} 


// 输 出 响应 
echo $response; 
?> 


W3School JavaScript & jQuery 教程 


e XHR readyState 
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AJAX 数据 库 实 例 


AJAX 可 用 来 与 数据 库 进 行动 态 通信 。 


AJAX 数据 库 实例 


下 面 的 例子 将 演示 网 页 如 何 通 过 AJAX 从 数据 库 读 取信 息 : 


<p> 请 在 下 面 的 下 拉 列 表 中 选择 一 个 客户 : </p> 


<form action="" style="margin-top:15px;"> 
<label1> 请 选择 一 位 客户 : 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, 


<option 
<option 


value="APPLE">Apple Computer, Inc.</option> 
value="BAIDU ">BAIDU, Inc</option> 


<option value="Canon">Canon USA, Inc.</option> 

<option value="Google">Google, Inc.</option> 

<option value="Nokia">Nokia Corporation</option> 

<option value="SONY">Sony Corporation of America</option> 
</select> 

</label> 

</form> 


<div id="txtHint" style="margin:15px 0 0 0;padding:0;border:0;color:#0479A7; font-weight: 


SSS 





实例 解释 - showCustomer() HZ 


当 用 户 在 上 面 的 下 拉 列 表 中 选择 某 个 客户 时 ， 会 执行 名 为 "showCustomer()" AHWR, AR 
由 "onchange" 事件 触发 : 


function showCustomer(str) 


var xmlhttp; 

if (str=="") 
{ 
document ..getElementById("txtHint").innerHTML=""; 
return; 


} 
if (window.XMLHttpRequest ) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 


xmlhttp=new XMLHttpRequest (); 
} 


else 

{// code for IE6, IES 

xmlhttp=new ActiveXOobject("Microsoft.XMLHTTP"); 
xmlhttp.onreadystatechange=function() 


if (xmlhttp.readyState==4 && xmlhttp.status==200) 


document .getElementById("txtHint").innerHTML=xmlhttp.responseText; 
} 


xmlhttp.open("GET", "getcustomer.asp?q="+str, true); 
xmlhttp.send(); 


} 


showCustomer() 画 数 执行 以 下 任务 : 


。 检查 是 否 已 选择 某 个 客户 

。 创建 XMLHttpRequest 对 象 

。 当 服 务 器 响应 就 绪 时 执行 所 创建 的 函数 

e 把 请 求 发 送 到 服务 器 上 的 文件 

。 请 注意 我 们 向 URL 添加 了 一 个 参数 q 〈 带 有 输入 域 中 的 内 容 ) 


AJAX fk Fas n E 


由 上 面 的 JavaScript 调用 的 服务 器 页 面 是 ASP 文件 ， 名 为 "getcustomer.asp"。 


用 PHP 编写 服务 器 文件 也 很 容易 ， 或 者 用 其 他 服务 器 语言 。 请 看 用 PHP 编写 的 相应 的 例 
人 


"getcustomer.asp" 中 的 源 代码 负责 对 数据 库 进 行 查询 ， 然 后 用 HTML 表格 返回 结果 


<% 

response. expires=-1 

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" 
sql=sql & "'" & request.querystring("q") & "'" 


set conn=Server.CreateObject("ADODB.Connection" ) 
conn.Provider="Microsoft.Jet.OLEDB.4.0" 

conn. Open(Server .Mappath("/db/northwind.mdb") ) 
set rs=Server.CreateObject("ADODB. recordset") 
rs.Open sql,conn 


response.write("<table>") 
do until rs.EOF 
for each x in rs.Fields 
response.write("<tr><td><b>" & x.name & "</b></td>") 
response.write("<td>" & x.value & "</td></tr>") 
next 
rs.MoveNext 
loop 
response.write("</table>") 
%> 


AJAX XML 实例 


AJAX 可 用 来 与 XML 文件 进行 交互 式 通信 。 


AJAX XML 实例 


下 面 的 例子 将 演示 网 页 如 何 使 用 AJAX 来 读 取 来 自 XML 文件 的 信息 : 


<div id="txtCDInfo" style="margin:15px © © 0; border:0; padding:0;"> 
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')" style="font-family:Verdana, 
</div> 





实例 解释 - loadXMLDoc() 函数 


当 用 户 点 击 上 面 的 “获得 CD 信息 ”这 个 按钮 ， 就 会 执行 l oadXMLDoc() HR, 


loadXMLDoc() 函数 创建 XMLHttpRequest 对 象 ， 添 加 当 服 务 器 响应 就 绪 时 执行 的 函数 ， 并 闻 
请 求 发 送 到 服务 器 。 


当 服 务 器 响应 就 绪 时 ， 会 构建 一 个 HTML Rig, MXML 文件 中 提取 节点 (元素) ， 最 后 使 用 
已 经 填充 了 XML 数据 的 HTML 表格 来 更 新 txtCDinfo 占 位 符 : 


function loadXMLDoc(ur1) 


var xmlhttp; 
var txt,Xx,xX,1; 
if (window.XMLHttpRequest ) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest (); 
} 
else 
{// code for IE6, IES 
xmlhttp=new ActivexObject("Microsoft.XMLHTTP" ); 


xmlhttp. onreadystatechange=function( ) 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 


{ 
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>"; 
x=xmlhttp.responseXML.documentElement .getElementsByTagName("CD") ; 
for (i=0;i<x.length;i++) 
{ 
txt=txt + "<tr>"; 
Xx=x[1i].getElementsByTagName("TITLE"); 
{ 
try 
{ 
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; 
} 
catch (er) 
{ 
txt=txt + "<td> </td>"; 
} 


} 
xx=x[i].getElementsByTagName("ARTIST"); 
{ 
try 
{ 
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; 
} 
catch (er) 
{ 
txt=txt + "<td> </td>"; 
} 
} 
txt=txt + "</tr>"; 
} 
txt=txt + "</table>"; 
document .getElementById('txtCDInfo').innerHTML=txt; 
} 
} 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 


} 


AJAX fk Fas n E 


上 面 这 个 例子 中 使 用 的 服务 器 页 面 实际 上 是 一 个 XML 文件 ， 名 为 "cd_catalog.xml"。 


jQuery 基础 


jQuery 简介 


jQuery 库 可 以 通过 一 行 简 间 单 的 标记 被 添加 到 网 页 中 





jQuery = - 
jQuery =—~%* JavaScript HAE. 
jQuery 库 包含 以 下 特性 : 


。 HTML 元 素 选取 

。 HTML 元 素 操作 

。 CSS 操作 

HTML 事件 函数 
JavaScript 特效 和 动画 
。 HTML DOM ig ASX 
e AJAX 

Utilities 


向 您 的 页 D 面 添加 jQuery 库 


jQuery 库 位 于 一 个 JavaScript 文件 中 ， 其 中 包含 了 所 有 的 jQuery HA. 


可 以 通过 下 面 的 标记 把 jQuery 添加 到 网 页 中 : 


<head> | | 
“<script type="text/javascript" src="jquery.js"></script> 
</head> 


请 注意 ，<script> 标签 应 该 位 于 页 面 的 <head> 部 分 。 
基础 jQuery 实例 
下 面 的 例子 演示 了 jQuery 的 hide() BAX, rai 7 HTML 文档 中 所 有 的 <p> 元 素 。 


实例 


<html> 

<head> 

“<script type="text/javascript" src="jquery.js"></script>- 
<script type="text/javascript"> 
$(document ).ready(function(){ 
$("button").click(function(){ 
“$("p")«hide(); 

}); 

3); 

</script> 

</head> 


<body> 

<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

<p>This is another paragraph.</p> 
<button type="button">Click me</button> 
</body> 

</html> 


F jQuery 


共有 两 个 版 本 的 jQuery 可 供 下 载 : 一 份 是 精简 过 的 ， 另 一 份 是 未 压缩 的 ( 供 调试 或 阅读 ) 。 
这 两 个 版 本 都 可 从 jQuery.com 下 载 。 


EWER 


Google 和 Microsoft 对 jQuery 的 支持 都 很 好 。 


如 果 您 不 愿意 在 自己 的 计算 机 上 存放 jQuery 库 ， 那 么 可 以 从 Google 或 Microsoft 加 载 CDN 
jQuery 核心 文件 。 


使 用 Google 的 CDN 


<head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 
/jquery/1.4.0/jquery.min.js"></script> 

</head> 


使 用 Microsoft 的 CDN 


<head> 

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery 
/jquery-1.4.min.js"></script> 

</head> 


jQuery 安装 


把 jQuery 添加 到 您 的 网 页 W 


如 需 使 用 jQuery， 您 需要 下 载 jQuery 库 (会 在 下 面 为 您 讲解 ) ， 然 后 把 它 包 含 在 希望 使 用 的 
网 页 中 。 


jQuery 库 是 一 个 JavaScript 文件 ， 您 可 以 使 用 HTML 的 <script> 标签 引用 它 : 


<head> 
<script src="jquery.js"></script> 
</head> 


请 注意 ，<script> 标签 应 该 位 于 页 面 的 <head> 部 分 。 
提示 : 您 是 否 很 疑惑 为 什么 我 们 没有 在 <script> 标签 中 使 用 type="text/javascript" ? 


在 HTML5 中 ， 不 必 那 样 做 了 。JavaScript 是 HTML5 以 及 所 有 现代 浏览 器 中 的 默认 脚本 语 
Z! 


F jQuery 


有 两 个 版 本 的 jQuery 可 供 下 载 : 


e Production version - 用 于 实际 的 网 站 中 ， 已 被 精简 和 压缩 。 
e Development version - 用 于 测试 和 开发 (未 压缩 ， 是 可 读 的 代码 ) 


这 两 个 版 本 都 可 以 从 jQuery.com 下 载 。 
提示 : 您 可 以 把 下 载 文件 放 到 与 页 面相 同 的 目录 中 ， 这 样 更 方便 使 用 。 


蔡 代 方案 

如 果 您 不 希望 下 载 并 存放 jQuery， 那么 也 可 以 通过 CDN (内 容 分 发 网 络 ) 引用 它 。 
谷歌 和 微软 的 服务 器 都 存 有 jQuery 。 

如 需 从 谷歌 或 微软 引用 jQuery， 请 使 用 以 下 代码 之 一 : 


Google CDN: 


<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> 
</script> 

</head> 


提示 : 通过 Google CDN 来 获得 最 新 可 用 的 版 本 : 


如 果 您 观察 上 什么 的 Google URL - 在 URL 中 规定 了 jQuery 版 本 (1.8.0)。 如 果 您 希望 使 用 最 
新 版 本 的 jQuery， 也 可 以 从 版 本 字符 串 的 末尾 (比如 本 例 1.8) 删除 一 个 数字 ， 谷 歌会 返回 
1.8 系列 中 最 新 的 可 用 版 本 (1.8.0、1.8.1 等 等 ) ， 或 者 也 可 以 只 剩 第 一 个 数字 ， 那 么 谷歌 会 
返回 1 系列 中 最 新 的 可 用 版 本 (从 1.1.0 到 1.9.9) 。 


Microsoft CDN: 


<head> 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> 
</script> 

</head> 


提示 : 使 用 谷歌 或 微软 的 jQuery， 有 一 个 很 大 的 优势 : 


许多 用 户 在 访问 其 他 站 点 时 ， 已 经 从 谷歌 或 微软 加 载 过 jQuery。 所 有 结果 是 ， 当 他 们 访问 您 
的 站 点 时 ， 会 从 缓存 中 加 载 jQuery， 这 样 可 以 减少 加 载 时 间 。 同 时 ， 大 多 数 CDN 都 可 以 确 


保 当 用 户 向 其 请 求 文件 时 ， 会 从 离 用 户 最 近 的 服务 器 上 返回 响应 ， 这 桩 也 可 以 提高 加 载 速 
度 。 


jQuery 语法 


通过 jQuery， 您 可 以 选取 (查询 ，query) HTML 元 素 ， 并 对 它们 执行 “ 操 
作 ” (actions) 。 


jQuery 语法 实例 
$(this).hide() 


演示 jQuery hide() 2X, ie AIAI HTML 元 素 。 


<html> 

<head> 

<script type="text/javascript" src="/jquery/jquery.js"></script> 

<script type="text/javascript"> 

$(document ).ready(function(){ 
$("button").click(function(){ 
$(this).hide(); 

}); 

}); 

</script> 

</head> 


<body> 
<button type="button">Click me</button> 
</body> 


</html> 


$("#test").hide() 
演示 jQuery hide() HA, ik id="test" 的 元 素 。 


<html> 
<head> 
<script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document ).ready(function(){ 
$("button").click(function(){ 
$("#test").hide(); 
}); 
}); 
</script> 
</head> 


<body> 

<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

<p id="test">This is another paragraph.</p> 
<button type="button">Click me</button> 
</body> 


</html> 


$("p").hide() 


KYA 


演示 jQuery hide() 函数 ， 人 隐藏 所 有 


元 素 。 


<html> 

<head> 

<script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$( document ).ready(function(){ 
$("button").click(function(){ 
$("p").hide(); 

}); 

}); 

</script> 

</head> 


<body> 

<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

<p>This is another paragraph.</p> 
<button type="button">Click me</button> 
</body> 

</html> 


$(".test").hide() 


7 


演示 jQuery hide() 函数 ， 隐 藏 所 有 class="test" 的 元 素 。 


Ù 


<html> 

<head> 

<script type="text/javascript" src="/jquery/jquery.js"></script> 
<script type="text/javascript"> 

$(document ).ready(function() 


$("button").click(function() 


{ 
$(".test").hide(); 
}); 

H; 

</script> 

</head> 

<body> 


<h2 class="test">This is a heading</h2> 
<p class="test">This is a paragraph.</p> 
<p>This is another paragraph .</p> 

<button type="button">Click me</button> 


</body> 
</html> 


jQuery i234 
jQuery 语法 是 为 HTML 元 素 的 选取 编制 的 ， 可 以 对 元 素 执 行 某 些 操作 。 


基础 语法 是 : $(selector).action() 


e 美元 符号 定义 jQuery 
。 选择 符 (selector) “查询 " 和 “查找 ” HTML 元 素 
e jQuery 的 action() 执行 对 元 素 的 操作 
示例 
$(this).hide() - 隐藏 当前 元 素 
$("p").hide() - 隐藏 所 有 上 段落 
$(".test").hide() - 隐藏 所 有 class="test" 的 所 有 元 素 
$("#test").hide() - 隐藏 所 有 id="test" 的 元 素 


提示 : jQuery 使 用 的 语法 是 XPath 与 CSS 选择 器 语法 的 组 合 。 在 本 教程 接 下 来 的 章节 ， 您 
将 学 习 到 更 多 有 关 选 择 器 的 语法 。 


二 上 T7 Æ 
DEEE 
您 也 许 已 经 注意 到 在 我 们 的 实例 中 的 所 有 jQuery 函数 位 于 一 个 document ready HA : 


$(document ).ready(function(){ 
- jQuery functions go here ---- 


3); 


这 是 为 了 防止 文档 在 完全 加 载 (就 绪 ) 之 前 运行 jQuery 代码 。 
如 果 在 文档 没有 完全 加 载 之 前 就 运行 函数 ， 操 作 可 能 失败 。 下 面 是 两 个 具体 的 例子 : 


。 试图 隐藏 一 个 不 存在 的 元 素 
。 获得 未 完全 加 载 的 图 像 的 大 小 


jQuery 选择 十 


选择 器 允许 您 对 元 素 组 或 单个 元 素 进 行 操作 。 


a 


jQuery i444 4r 


在 前 面 的 章节 中 ， 我 们 展示 了 一 些 有 关 如 何 选取 HTML 元 素 的 实例 。 

关键 点 是 学 习 jQuery 选择 器 是 如 何 准 确 地 选取 您 希望 应 用 效果 的 元 素 。 

jQuery 元 素 选 择 器 和 属性 选择 器 允许 您 通过 标签 名 、 属 性 名 或 内 容 对 HTML 元 素 进行 选择 。 
选择 器 允许 您 对 HTML 元 素 组 或 单个 元 素 进 行 操作 。 

在 HTML DOM 术语 中 : 


选择 器 允许 您 对 DOM 元 素 组 或 单个 DOM 节点 进行 操作 。 


jQuery 元 素 选 择 器 


jQuery 使 用 CSS 选择 器 来 选取 HTML 元 素 。 
$("p") 选取 <p> 元 素 。 
$("p.intro") 选取 所 有 class="intro" 的 <p> 元 素 。 


$("p#demo") 选取 所 有 id="demo" 的 <p> 元 素 。 


jQuery 属性 选择 器 

jQuery 使 用 XPath 表达 式 来 选择 带 有 给 定 属性 的 元 素 。 
$("[href]") 选取 所 有 带 有 href 属性 的 元 素 。 
$("[href='"#']") 选取 所 有 带 有 href 值 等 于 "#" 的 元 素 。 
$("[hrefl="#']") 选取 所 有 带 有 href 值 不 等 于 "#" 的 元 素 。 


$("[href$=".jpg']") 选取 所 有 href 值 以 "jpg" 结尾 的 元 素 。 


jQuery CSS 选择 器 


jQuery CSS 选择 器 可 用 于 改变 HTML 元 素 的 CSS 属性 。 


下 面 的 例子 把 所 有 p 元 素 的 背景 颜色 更 改 为 红色 : 


实例 


$("p").css("background-color","red"); 


更 多 的 选择 器 实例 


语法 描述 
$(this) 当前 HTML 元 素 
$("p") 所 有 <p> 元 素 
$("p.intro") 所 有 class="intro" 的 <p> 元 素 
$(".intro") 所 有 class="intro" 的 元 素 
$("#intro") id="intro" 的 元 素 
$("ul li:first") 每 个 <ul> 的 第 一 个 <li> 元 素 
$("[href$=".jpg']") ATA # ALA "jpg" 结尾 的 属性 值 的 href 属性 
$("div#intro .head") id="intro" BY <div> 元 素 中 的 所 有 class="head" 的 元 素 


如 需 完整 的 参考 手册 ， 请 访问 我 们 的 jQuery 选择 器 人 参考 手册 。 


jQuery 事件 


jQuery 是 为 事件 处 理 特别 设计 的 。 


jQuery 事件 函数 
jQuery 事件 处 理 方 法 是 jQuery 中 的 核心 画 数 。 


事件 处 理 程序 指 的 是 当 HTML 中 发 生 某 些 事件 时 所 调用 的 方法 。 术 语 由 事件 "触发 ”( 或 " 激 
发 ") 经 常会 被 使 用 。 


通常 会 把 jQuery 代码 放 到 <head> 部 分 的 事件 处 理 方法 中 : 


实例 


<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document ).ready(function(){ 
~*$("button").click(function(){ 
$("p").hide(); 
i 
3); 
</script> 
</head> 
<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button>Click me</button> 
</body> 


</html> 


在 上 面 的 例子 中 ， 当 按钮 的 点 击 事件 被 触发 时 会 调用 一 个 图 数 : 


$("button").click(function() {..some code... } ) 


该 方法 隐藏 所 有 <p> 元 素 : 


$("p").hide(); 


单独 文件 中 的 函数 


如 果 您 的 网 站 包含 许多 页 面 ， 并 且 您 希望 您 的 jQuery 男 数 易于 维护 ， 那 么 请 把 您 的 jQuery 
函数 放 到 独立 的 .js 文件 中 。 


当 我 们 在 教程 中 演示 jQuery 时 ， 会 将 函数 直接 添加 到 <head> 部 分 中 。 不 过 ， 把 它们 放 到 一 
个 单独 的 文件 中 会 更 好 ， 就 像 这 样 (通过 src 属性 来 引用 文件 ) 


实例 


<head> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript" src="my_jquery_functions.js"></script> 
</head> 


jQuery 名 称 冲突 


jQuery 使 用 $ 符号 作为 jQuery 的 简介 方式 。 

某 些 其 他 JavaScript 库 中 的 函数 (比如 Prototype) 同样 使 用 $ 符号 。 

jQuery 使 用 名 为 noConflict() 的 方法 来 解决 该 问题 。 
varj9=jQuery.noConflict()， 帮 助 您 使 用 自己 的 名 称 (比如 ja) 来 代替 $ 符号 。 


结论 
由 于 jQuery 是 为 处 理 HTML 事件 而 特别 设计 的 ， 那 么 当 您 遵循 以 下 原则 时 ， 您 的 代码 会 更 恰 


当 且 更 易 维 折 : 


。 把 所 有 jQuery 代码 置 于 事件 处 理 函 数 中 

。 把 所 有 事件 处 理 函 数 置 于 文档 就 绪 事 件 处 理 器 中 
e 把 jQuery 代码 置 于 单独 的 .js 文件 中 

© 如 果 存 在 名 称 冲突 ， 则 重 命 名 jQuery 库 


jQuery 事件 


下 面 是 jQuery 中 事件 方法 的 一 些 例子 : 


Event HË 


绑 定 函数 至 
将 郴 数 绑 定 到 文档 的 就 绪 事件 〈 当 文档 完成 加 载 时 ) 
触发 或 将 函数 绑 定 到 被 选 元 素 的 点 击 事件 
触发 或 将 函数 绑 定 到 被 选 元 素 的 双击 事件 
触发 或 将 函数 绑 定 到 被 选 元 素 的 获得 焦点 事件 
触发 或 将 函数 绑 定 到 被 选 元 素 的 饥 标 着 停 事 件 





jQuery 效果 


jQuery 效果 - 隐藏 和 显示 


隐藏 、 显 示 、 切 换 ， 滑 动 ， 淡 人 淡出 ， 以 及 动画 ， 哇 哦 ! 


Ry 

实例 

jQuery hide() 

演示 一 个 简单 的 jQuery hide() 方法 。 


<!DOCTYPE html> 

<html> 

<head> 

<script src="/jquery/jquery-1.11.1.min.js"> 

</script> 

<script> 

$( document ).ready(function(){ 
$("p").click(function(){ 

$(this).hide(); 

H); 

}); 

</script> 

</head> 

<body> 

<p> 如 果 您 点 击 我 ， 我 会 消失 。</p> 

<p> 点 击 我 ， 我 会 消失 。</p> 

<p> 也 要 点 击 我 哦 。</p> 

</body> 

</html> 


jQuery hide() 


另 一 个 hide() 演示 。 如 何 隐藏 部 分 文本 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document ).ready(function(){ 

$(".ex .hide").click(function(){ 
$(this).parents(".ex").hide("slow"); 
3); 
3); 


</script> 

<style type="text/css"> 
div.ex 

{ 

background-color :#e5eecc; 
padding: 7px; 

border:solid 1px #c3c3c3; 


} 
</style> 
</head> 


<body> 


<h3> FE aS R</h3> 

<div class="ex"> 

<button class="hide" type="button"> 隐 藏 </button> 
<p> 联 系 人 : 张 先生 <br /> 

北三 环 中 路 100 号 <br /> 

北京 </p> 

</div> 


<h3> 美 国 办 事 处 </h3> 

<div class="ex"> 

<button class="hide" type="button"> 隐 藏 </button> 
<p> 联 系 人 : David<br /> 

第 五 大 街 200 号 <br /> 

纽约 </p> 

</div> 


</body> 
</html> 


jQuery hide() 和 show() 


通过 jQuery， 您 可 以 使 用 hide() 和 show) 方法 来 隐藏 和 显示 HTML 元 素 : 


$("#hide").click(function(){ 
$("p").hide(); 
}); 


$("#show").click(function(){ 
$("p").show(); 
3); 


语法 : 


$(selector).hide(speed, callback); 


$(selector).show(speed, callback); 


可 选 的 speed 参数 规定 隐藏 /显示 的 速度 ， 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 隐藏 或 显示 完成 后 所 执行 的 酚 数 名 称 。 


下 面 的 例子 演示 了 带 有 speed 参数 的 hide() 方法 : 


实例 


$("button").click(function(){ 
$("p").hide(1000) ; 
); 


jQuery toggle() 
通过 jQuery， 您 可 以 使 用 toggle() 方法 来 切换 hide() 和 show() 方法 。 


显示 被 隐藏 的 元 素 ， 并 隐藏 已 显示 的 元 素 : 


实例 


$("button").click(function(){ 
ae reac 


语法 : 
$(selector).toggle(speed, callback); 


可 选 的 speed 参数 规定 隐藏 /显示 的 速度 ， 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 


可 选 的 callback 参数 是 toggle) 方法 完成 后 所 执行 的 函数 名 称 。 


jQuery 效果 参考 手册 


如 需 全 面 查阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery 效果 - 淡 人 淡出 


通过 jQuery， 您 可 以 实现 元 素 的 淡 入 淡出 效果 。 


/> 

实例 

jQuery fadeln() 

演示 jQuery fadeln() 方法 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script> 
$( document ).ready(function(){ 
$("button").click(function(){ 
$("#divi").fadeIn(); 
$("#div2").fadeIn("slow"); 
$("#div3") .fadeIn(3000) ; 
3); 
3); 
</script> 
</head> 


<body> 

<p> 演 示 带 有 不 同 参数 的 fadeIn() 方法 。</p> 

<button> 点 击 这 里 ， 使 三 个 矩形 淡 入 </button> 

<br><br> 

<div id="divi" style="width:80px;height:80px;display:none;background-color:red;"></div> 
<br> 

<div id="div2" style="width: 80px; height : 80px; display:none; background-color: green; "></div> 
<br> 

<div id="div3" style="width: 80px; height : 80px; display:none; background-color :blue; "></div> 
</body> 

</html> 


二 Ed 
jQuery fadeOut() 


演示 jQuery fadeOut() 方法 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$( document ).ready(function(){ 
$("button").click(function(){ 
$("#divi").fadeOut(); 
$("#div2").fadeOut("slow"); 
$("#div3") .fadeOut (3000) ; 
}); 
}); 
</script> 
</head> 


<body> 

<p> 演 示 带 有 不 同 参数 的 fade0ut( ) Aik. </p> 

<button> 点 击 这 里 ， 使 三 个 和 矩形 淡出 </button> 

<br><br> 

<div id="divi" style="width:80px;height:80px;background-color:red;"></div> 
<br> 

<div id="div2" style="width: 80px; height : 80px; background-color: green; "></div> 
<br> 

<div id="div3" style="width: 80px; height :80px; background-color: blue; "></div> 
</body> 


</html> 


jQuery fadeToggle() 
演示 jQuery fadeToggle() Aik. 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script> 
$( document ).ready(function(){ 
$("button").click(function(){ 
$("#divi").fadeToggle(); 
$("#div2").fadeToggle("slow"); 
$("#div3") .fadeToggle( 3000); 
3); 
3); 
</script> 
</head> 


<body> 


<p> 演 示 带 有 不 同 参数 的 fadeToggle( ) Aik </p> 

<button> 点 击 这 里 ， 使 三 个 矩形 淡 入 淡出 </button> 

<br><br> 

<div id="divi" style="width:80px;height:80px;background-color:red;"></div> 
<br> 

<div id="div2" style="width: 80px; height :80px; background-color: green; "></div> 
<br> 

<div id="div3" style="width: 80px; height : 80px; background-color: blue; "></div> 
</body> 


</body> 
</html> 


jQuery fadeTo() 


演示 jQuery fadeTo() Aik. 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script> 
$(document ).ready(function(){ 
$("button").click(function(){ 
$("#divi").fadeTo("slow",@.15); 
$("#div2").fadeTo("slow",0.4); 
$("#div3").fadeTo("slow",0.7); 
3); 
}); 
</script> 
</head> 


<body> 


<p> 演 示 带 有 不 同 参数 的 fadeTo( ) Aik. </p> 

<button> 点 击 这 里 ， 使 三 个 和 矩形 淡出 </button> 

<br><br> 

<div id="divi" style="width: 80px; height :80px; background-color: red;"></div> 
<br> 

<div id="div2" style="width: 80px;height : 80px; background-color: green;"></div> 
<br> 

<div id="div3" style="width: 80px;height :80px;background-color: blue; "></div> 


</body> 
</html> 


jQuery Fading 方法 
通过 jQuery， 您 可 以 实现 元 素 的 淡 入 淡出 效果 。 


jQuery 拥有 下 面 四 种 fade 方法 : 


fadeln() 
fadeOut() 
fadeToggle() 
fadeTo() 


jQuery fadeln() 方法 


jQuery fadeln() 用 于 淡 入 已 隐藏 的 元 素 。 
语法 : 
$(selector).fadeIn(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" KEM. 


可 选 的 callback 参数 是 fading SERAPH BAA PM. 


下 面 的 例子 演示 了 带 有 不 同 参数 的 fadeln() 方法 : 


实例 


$("button").click(function(){ 
$("#divi").fadeIn(); 
$("#div2").fadeIn("slow"); 
$("#div3") .fadeIn( 3000) ; 
3); 


jQuery fadeOut() 方法 
jQuery fadeOut() 方法 用 于 淡出 可 见 元 素 。 
语法 : 
$(selector ).fade0ut (speed, callback); 
可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 带 有 不 同 参数 的 fadeOut() 方法 : 
实例 


$("button").click(function(){ 
$("#divi").fadeOut(); 
$("#div2").fadeOut ("slow"); 
$("#div3") .fadeOut (3000) ; 
3); 


jQuery fadeToggle() 方法 


jQuery fadeToggle() 方法 可 以 在 fadeln() 与 fadeOut() 方法 之 间 进 行 切 换 。 
如 果 元 素 已 淡出 ， 则 fadeToggle() 会 向 元 素 添加 淡 入 效果 。 


如 果 元 素 已 淡 入 ， 则 fadeToggle() 会 向 元 素 添加 淡出 效果 。 


语法 : 


$(selector).fadeToggle(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 fading 完成 后 所 执行 的 函数 名 称 。 


下 面 的 例子 演示 了 带 有 不 同 参数 的 fadeToggle() 方法 : 


实例 


$("button").click(function(){ 
$("#divi").fadeToggle(); 
$("#div2").fadeToggle("slow"); 
$("#div3") .fadeToggle( 3000) ; 
3); 


jQuery fadeTo() 方法 
jQuery fadeTo() 方法 允许 渐变 为 给 定 的 不 透明 度 〈 值 介 于 0 与 1 之 间 ) 。 
语法 : 

$(selector).fadeTo(speed, opacity, callback); 


必需 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow". "fast" KEM. 


fadeTo() 方法 中 必需 的 opacity 参数 将 淡 人 淡出 效果 设置 为 给 定 的 不 透明 度 〈 值 介 于 0 与 1 之 
间 ) 。 


可 选 的 callback 参数 是 该 图 数 完 成 后 所 执行 的 函数 名 称 。 


下 面 的 例子 演示 了 带 有 不 同 参 数 的 fadeTo() 方法 : 


实例 


$("button").click(function(){ 
$("#divi").fadeTo("slow",@.15); 
$("#div2").fadeTo("slow",0.4); 
$("#div3").fadeTo("slow",0.7); 
3); 


jQuery 效果 参考 手册 


W3School JavaScript & jQuery 教程 


如 需 全 面 查 阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery 效果 - 淡 入 淡出 207 


jQuery 效果 - 滑动 


jQuery 滑动 方法 可 使 元 素 上 下 滑动 。 


Ry 

实例 

jQuery slideDown() 

演示 jQuery slideDown() 方法 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document ).ready(function(){ 
$(".flip").click(function(){ 
$(".panel") .slideDown("slow"); 
3); 
3); 


</script> 


<style type="text/css"> 
div.panel,p.flip 

{ 

margin: Opx; 

padding: 5px; 
text-align:center; 
background: #e5eecc; 
border:solid 1px #c3c3c3; 
} 


div.panel 


{ 
height:120px; 
display:none; 


} 
</style> 
</head> 


<body> 

<div class="panel"> 

<p>W3School - 领先 的 Web 技术 教程 站 点 </p> 

<p> 在 W3Schoo1， 你 可 以 找到 你 所 需要 的 所 有 网 站 建设 教程 。</p> 
</div> 


<p class="flip"> 请 点 击 这 里 </p> 


</body> 
</html> 


jQuery slideUp() 


演示 jQuery slideUp() 方法 。 


<!DOCTYPE html> 

<html> 

<head> 

<script src="/jquery/jquery-1.11.1.min.js"></script> 

<script type="text/javascript"> 

$(document ).ready(function(){ 
$(".flip").click(function(){ 

$(".panel").slideUp("slow"); 

3); 

H); 


</script> 


<style type="text/css"> 
div.panel,p.flip 

{ 

margin: px; 

padding: 5px; 
text-align:center; 
background: #e5eecc; 
border:solid 1px #c3c3c3; 


} 

div.panel 

{ 
height:120px; 


} 
</style> 
</head> 


<body> 

<div class="panel"> 

<p>W3School - 领先 的 Web 技术 教程 站 点 </p> 

<p> 在 W3Schoo1， 你 可 以 找到 你 所 需要 的 所 有 网 站 建设 教程 。</p> 
</div> 


<p class="flip"> 请 点 击 这 里 </p> 


</body> 
</html> 


jQuery slideToggle() 


演示 jQuery slideToggle() 方法 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
$(document ).ready(function(){ 
$(".flip").click(function(){ 
$(".panel").slideToggle("slow"); 
3); 
3); 


</script> 


<style type="text/css"> 
div.panel,p.flip 
{ 


margin: Opx; 

padding: 5px; 
text-align:center; 
background: #e5eecc; 
border:solid 1px #c3c3c3; 
} 


div.panel 


{ 
height :120px; 
display:none; 


} 
</style> 
</head> 


<body> 

<div class="panel"> 

<p>W3School - 领先 的 Web 技术 教程 站 点 </p> 

<p> 在 W3Schoo1， 你 可 以 找到 你 所 需要 的 所 有 网 站 建设 教程 。</p> 
</div> 


<p class="flip"> 请 点 击 这 里 </p> 


</body> 
</html> 


jQuery 滑动 方法 
通过 jQuery， 您 可 以 在 元 素 上 创建 滑动 效果 。 
jQuery 拥有 以 下 滑动 方法 : 


e slideDown() 
e slideUp() 
e slideToggle() 


jQuery slideDown() 方法 
jQuery slideDown() 方法 用 于 向 下 滑动 元 素 。 


语法 : 


$(selector).slideDown(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 slideDown() 方法 : 


实例 


$("#flip").click(function(){ 
$("#panel").slideDown(); 
); 


jQuery slideUp() 方法 
jQuery slideUp() 方法 用 于 向 上 滑动 元 素 。 
语法 : 

$(selector).slideUp(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 函数 名 称 。 


下 面 的 例子 演示 了 slideUp() 方法 : 


实例 


$("#flip").click(function(){ 
$("#panel").slideUp(); 
); 


jQuery slideToggle() 方法 
jQuery slideToggle() 方法 可 以 在 slideDown() 与 slideUp() 方法 之 间 进 行 切换 。 
如 果 元 素 向 下 滑动 ， 则 slideToggle() 可 向 上 滑动 它们 。 


如 果 元 素 向 上 滑动 ， 则 slideToggle() 可 向 下 滑动 它们 。 


$(selector).slideToggle(speed, callback); 


可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" 或 毫秒 。 
可 选 的 callback 参数 是 滑动 完成 后 所 执行 的 函数 名 称 。 
下 面 的 例子 演示 了 slideToggle() 方法 : 


实例 


$("#flip").click(function(){ 
$("#panel").slideToggle(); 


rd 


jQuery 效果 参考 手册 


如 需 全 面 查阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery 效果 - 动 男 


jQuery animate() 方法 允许 您 创建 自 定义 的 动画 。 


jQuery 动画 - animate() 方法 
jQuery animate() 方法 用 于 创建 自 定义 动画 。 
语法 : 
$(selector).animate( {params}, speed, callback); 
必需 的 params 参数 定义 形成 动画 的 CSS 属性 。 
可 选 的 speed 参数 规定 效果 的 时 长 。 它 可 以 取 以 下 值 : "slow", "fast" KEM. 


可 选 的 callback 参数 是 动画 完成 后 所 执行 的 函数 名 称 。 


下 面 的 例子 演示 animate() 方法 的 简单 应 用 ; CHE <div> 元 素 移动 到 左边 ， 直 到 left 属性 等 于 
250 像素 为 止 : 


实例 


$("button").click(function(){ 
$("div").animate({left:'250px'}); 
}); 


提示 : 默认 地 ， 所 有 HTML 元 素 都 有 一 个 静态 位 置 ， 且 无 法 移动 。 


如 需 对 位 置 进行 操作 ， 要 记得 首先 把 元 素 的 CSS position 属性 设置 为 relative、fixed 或 
absolute ! 


jQuery animate() - 操作 多 个 属性 
请 注意 ， 生 成 动画 的 过 程 中 可 同时 使 用 多 个 属性 : 


实例 


$("button").click(function(){ 
$("div").animate({ 
left: '250px', 
opacity:'0.5', 
height: '150px', 
width: '150px' 
3); 
3); 


提示 : 可 以 用 animate() 方法 来 操作 所 有 CSS 属性 吗 ? 


是 的 ， 几 乎 可 以 ! 不过， 需要 记 住 一 件 重 要 的 事情 : 当 使 用 animate() 时 ， 必 须 使 用 Camel 
标记 法 书写 所 有 的 属性 名 ， 比 如 ， 必 须 使 用 paddingLeft 而 不 是 padding-left， 使 用 
marginRight 而 不 是 margin-right， 等 等 。 

同时 ， 色 彩 动画 并 不 包含 在 核心 jQuery 库 中 。 


如 果 需 要 生成 颜色 动画 ， 您 需要 从 jQuery.com FA, Color Animations 插件 。 


jQuery animate() - 使 用 相对 值 


也 可 以 定义 相对 值 ( 该 值 相对 于 元 素 的 当前 值 ) 。 需 要 在 值 的 前 面 加 上 += 或 -= : 


实例 


$("button").click(function(){ 
$("div").animate({ 
left: '250px', 
height:'+=150px', 
width: '+=150px' 
}); 
}); 


jQuery animate() - 使 用 预定 义 的 值 


您 甚至 可 以 把 属性 的 动画 值 设 置 为 "show"、"hide" 或 "toggle" : 


实例 


$("button").click(function(){ 
$("div").animate({ 

height: 'toggle' 

H); 

H; 


jQuery animate() - 使 用 队列 功能 


默认 地 ，jQuery 提供 针对 动画 的 队列 功能 。 


这 意味 着 如 果 您 在 彼此 之 后 编写 多 个 animate() 调用 ，jQuery 会 创建 包含 这 些 方 法 调用 的 “内 
部 "队列 。 然 后 逐一 运行 这 些 animate 调用 。 


实例 1 
隐藏 ， 如 果 您 希望 在 彼此 之 后 执行 不 同 的 动画 ， 那 么 我 们 要 利用 队列 功能 : 


$("button").click(function(){ 
var div=$("div"); 
div.animate({height: '300px', opacity: '0.4'},"slow"); 
div.animate({width: '300px', opacity: '0.8'},"slow"); 
div.animate({height:'100px', opacity: '0.4'},"slow"); 
div.animate({width: '100px', opacity: '0.8'},"slow"); 
3); 


实例 2 
下 面 的 例子 把 <div> 元 素 移动 到 右边 ， 然 后 增加 文本 的 字号 : 


$("button").click(function(){ 
var div=$("div"); 
div.animate({left:'100px'},"slow"); 
div.animate({fontSize: '3em'},"slow"); 


3); 


jQuery 停止 动画 


jQuery stop() 方法 用 于 在 动画 或 效果 完成 前 对 它们 进行 停止 。 


全 > 

实例 

jQuery stop() 滑动 

演示 jQuery stop() 方法 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script> 
$(document ).ready(function(){ 
$("#flip").click(function(){ 
$("#panel") .slideDown( 5000) ; 
J); 
$("#stop").click(function(){ 
$("#panel").stop(); 
3); 
}); 


</script> 


<style type="text/css"> 
#panel,#flip 


{ 

padding:5px; 
text-align:center; 
background-color :#e5eecc; 
border:solid 1px #c3c3c3; 
} 

#panel 


{ 
padding: 50px; 
display:none; 


} 
</style> 
</head> 


<body> 
<button id="stop"> 停 止 滑动 </button> 
<div id="f1ip"> 点 击 这 里 ， 向 下 滑动 面板 </div> 


<div id="panel">Hello world!</div> 


</body> 
</html> 


jQuery stop() 动画 〈 带 有 参数 ) 


演示 jQuery stop() 方法 。 


<!DOCTYPE html> 
<html> 
<head> 
<script src="/jquery/jquery-1.11.1.min.js"> 
</script> 
<script> 
$(document ).ready(function(){ 
$("#start").click(function(){ 
$("div").animate({left:'100px'},5000); 
$("div").animate({fontSize: '3em'}, 5000) ; 
}); 


$("#stop").click(function(){ 
$("div").stop(); 
}); 


$("#stop2").click(function(){ 
$("div").stop(true); 
3); 


$("#stop3").click(function(){ 
$("div").stop(true, true); 

}); 
}); 
</script> 
</head> 
<body> 
<button id="start"> 开 始 </button> 
<button id="stop"> 停 止 </button> 
<button id="stop2"> 停 止 所 有 </button> 
<button id="stop3"> 停 止 但 要 完成 </button> 
<p><b>" 开 始 "</b> 按钮 会 启动 动画 。</p> 
<p><b>" 停 止 "</b> 按钮 会 停止 当前 活动 的 动画 ， 但 允 b 许 已 排队 的 动画 向 前 执行 。</p> 
<p><b>" 停 止 所 有 "</b> 按钮 停止 当前 活动 的 动画 ， 并 清空 动画 队列 ; 因此 元 素 上 的 所 有 动画 都 会 停止 。</p> 
<p><b>" 停 止 但 要 完成 "</b> 会 立即 完成 当前 活动 的 动画 ， 然后 停 下 来 。 </p> 
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> 


</body> 
</html> 


[ES 


jQuery stop() 方法 


jQuery stop() 方法 用 于 停止 动画 或 效果 ， 在 它们 完成 之 前 。 
stop() 方法 适用 于 所 有 jQuery 效果 辑 数 ， 包 括 滑动 、 淡 入 淡出 和 自 定义 动画 


吾 法 
$(selector).stop(stopAll, goToEnd); 


可 选 的 stopAll 参数 规定 是 否 应 该 清除 动画 队列 。 默 认 是 false， 即 仅 停止 活动 的 动画 ， 人 允许 
任何 排 入 队列 的 动画 向 后 执行 。 


选 的 goToEnd 参数 规定 是 否 立 即 完成 当前 动画 。 默 认 是 false. 


因此 ， 默 认 地 ，stop() 会 清除 在 被 选 元 素 上 指定 的 当前 动画 。 


下 面 的 例子 演示 stop() 方法 ， 不 带 参 数 : 


实例 


$("#stop").click(function(){ 
$("#panel").stop(); 
); 


jQuery 效果 参考 手册 


如 需 全 面 查阅 jQuery 效果 ， 请 访问 我 们 的 jQuery 效果 参考 手册 。 


jQuery Callback EX 


Callback KJE 4B a E 100% 完成 之 后 执行 。 


jQuery 动画 的 问题 


许多 jQuery 男 数 涉 及 动画 。 这 些 函 数 也 许 会 将 speed 或 duration 作为 可 选 参数 。 
例子 : $("p").hide("slow") 


speed 或 duration 参数 可 以 设置 许多 不 同 的 值 ， 比 如 "slow", "fast", "normal" 或 毫秒 。 


实例 


$("button").click(function(){ 
$("p").hide(1000) ; 
3); 


由 于 JavaScript 语句 (指令 ) 是 逐一 执行 的 - 按照 次 序 ， 动 画 之 后 的 语句 可 能 会 产生 错误 或 
面 冲突 ， 因 为 动画 还 没有 完成 。 


为 了 避免 这 个 情况 ， 您 可 以 以 参数 的 形式 添加 Callback HR, 
jQuery Callback 函数 
当 动 画 100% 完成 后 ， 即 调用 Callback HR. 
典型 的 语法 : 

$(selector) .hide(speed, callback) 
callback 参数 是 一 个 在 hide 操作 完成 后 被 执行 的 函数 。 


错误 (没有 callback) 


$("p").hide(1000); 
alert("The paragraph is now hidden"); 


正确 (有 callback) 


$("p").hide(1000, Function() { 
alert("The paragraph is now hidden"); 


3); 


论 : WRBA- DA RARA ARATE, AEA callback HA, 


jQuery - Chaining 


通过 jQuery， 您 可 以 把 动作 /方法 链接 起 来 。 
Chaining 人 允许 我 们 在 一 条 语句 中 人 允许 多 个 jQuery 方法 (在 相同 的 元 素 上 ) 。 


jQuery 方法 链接 


直到 现在 ， 我 们 都 是 一 次 写 一 条 jQuery 语句 (一 条 接着 另 一 条 ) © 


不 过 ， 有 一 种 名 为 链接 (chaining) 的 技术 ， 人 允许 我 们 在 相同 的 元 素 上 运行 多 条 jQuery 命 


令 ， 一 条 接着 另 一 条 。 
提示 : 这 样 的 话 ， 浏 览 器 就 不 必 多 次 查找 相同 的 元 素 。 


如 需 链 接 一 个 动作 ， 您 只 需 简单 地 把 该 动作 追加 到 之 前 的 动作 上 。 


例子 1 


下 面 的 例子 把 css(), slideUp(), and slideDown() 链接 在 一 起 。"p1" 元 素 首 先 会 变 为 红色 ， 然 
后 向 上 滑动 ， 然 后 向 下 滑动 : 


$("#p1").css("color","red").slideUp(2000).slideDown(2000); 


如 果 需 要 ， 我 们 也 可 以 添加 多 个 方法 调用 。 


提示 : 当 进 行 链接 时 ， 代 码 行 会 变 得 很 差 。 不 过 ，jQuery 在 语法 上 不 是 很 严格 ; 您 可 以 按照 
希望 的 格式 来 宇 ， 包 含 折 行 和 缩 进 。 


例子 2 
这 样 写 也 可 以 运行 : 


$("#p1") .css("color", "red") 
. SLideUp( 2000) 
. sSLideDown( 2000); 


jQuery 会 抛 掉 多 余 的 空格 ， 并 按照 一 行 长 代码 来 执行 上 面 的 代码 行 。 


jQuery HTML 


jQuery - 获得 内 容 和 属性 


jQuery 拥有 可 操作 HTML 元 素 和 属性 的 强大 方法 。 


jQuery DOM 操作 

jQuery 中 非常 重要 的 部 分 ， 就 是 操作 DOM 的 能 力 。 

jQuery 提供 一 系列 与 DOM 相关 的 方法 ， 这 使 访问 和 操作 元 素 和 属性 变 得 很 容易 。 
提示 : DOM = Document Object Model (文档 对 象 模型 ) 

DOM 定义 访问 HTML 和 XML 文档 的 标准 : 


WIC 文档 对 象 模型 独立 于 平台 和 语言 的 界面 ， 人 允许 程 序 和 脚本 动态 访问 和 更 新 文档 的 内 容 、 
结构 以 及 样式 。” 


获得 内 容 - text()、html() 以 及 val() 


三 个 简单 实用 的 用 于 DOM 操作 的 jQuery 方法 : 


。 text() - 设置 或 返回 所 选 元 素 的 文本 内 容 
。 html() - 设置 或 返回 所 选 元 素 的 内 容 (包括 HTML 标记 ) 
。 val() - 设置 或 返回 表单 字段 的 值 


下 面 的 例子 演示 如 何 通过 jQuery text() 和 html() 方法 来 获得 内 容 : 


实例 


$("#btni").click(function(){ 
alert("Text: " + $("#test").text()); 


}); 
$("#btn2").click(function(){ 


alert("HTML: " + $("#test").html()); 
3); 


下 面 的 例子 演示 如 何 通 过 jQuery val) 方法 获得 输入 字段 的 值 : 


实例 


$("#btni").click(function() { 
alert("Value: " + $("#test").val()); 
}); 


获取 属性 - attr() 
jQuery attr() 方法 用 于 获取 属性 值 。 
下 面 的 例子 演示 如 何 获得 链接 中 href 属性 的 值 : 


实例 


$("button").click(function(){ 
alert($("#w3s").attr("href")); 


下 一 章 会 讲解 如 何 设置 (改变) 内 容 和 属性 值 。 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 设置 内 容 和 属性 


设置 内 容 - text()、html() 以 及 val() 


我 们 将 使 用 前 一 章 中 的 三 个 相同 的 方法 来 设置 内 容 : 


。 text() - 设置 或 返回 所 选 元 素 的 文本 内 容 
。 html() - 设置 或 返回 所 选 元 素 的 内 容 (包括 HTML 标记 ) 


。 val() - 设置 或 返回 表单 字段 的 值 


下 面 的 例子 演示 如 何 通过 text), htm) 以 及 val) 方法 来 设置 内 容 : 


实例 


$("#btni").click(function(){ 
$("#testi").text("Hello world!"); 


$("#btn2").click(function(){ 
$("#test2").html("<b>Hello world!</b>"); 


$("#btn3") .click(function(){ 


$("#test3").val("Dolly Duck"); 
}); 


text()、html() 以 及 val() 的 回调 函数 


上 面 的 三 个 jQuery 方法 : text()、html() 以 及 val), Am AEA RA. CARA aD 
4 


数 : 被 选 元 素 列 表 中 当前 元 素 的 下 标 ， 以 及 原始 〈 旧 的 ) t. ARBOR eRe 
用 的 字符 串 。 


下 面 的 例子 演示 带 有 回调 函数 的 text() 和 html() : 


实例 


$("#btni").click(function(){ 
$("#testi").text(function(i, origText){ 


return "Old text: " + origText + " New text: Hello world! 
Gde “+a +) Yt) 
H; 


$("#btn2").click(function(){ 
$("#test2").html(function(i,origText){ 
return "Old html: " + origText + " New html: Hello <b>world!</b> 
(andex Ya ot) 
H); 
}); 


a 


设置 属性 - attr() 
jQuery attr() 方法 也 用 于 设置 /改变 属性 值 。 


下 面 的 例子 演示 如 何 改变 设置 ) 链接 中 href 属性 的 值 : 
实例 


$("button").click(function(){ 
$("#w3s").attr( "href", "http://www.w3school.com.cn/jquery"); 


了 


attr) 方法 也 人 允许 您 同时 设置 多 个 属性 。 


下 面 的 例子 演示 如 何 同时 设置 href 和 title 属性 : 
实例 


$("button").click(function(){ 
$("#w3s").attr({ 
"href" : "http://www.w3school.com.cn/jquery", 
"title" : "W3School jQuery Tutorial" 
3); 
3); 


attr() 的 回调 函数 


jQuery 方法 attr()， 也 提供 回调 画 数 。 回 调 范 数 由 两 个 参数 : 被 选 元 素 列 表 中 当前 元 素 的 下 
标 ， 以 及 原始 (B69) 值 。 然 后 以 函数 新 值 返 回 您 希望 使 用 的 字符 串 。 


may == 


TEATAR ACHERN attr) 方法 : 
实例 


$("button").click(function(){ 


$("#w3s").attr("href", function(i, origValue) { 
return origValue + "/jquery"; 
3); 
3); 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 添加 元 素 


通过 jQuery， 可 以 很 容易 地 添加 新 元 素 / 内 容 。 


添加 新 的 HTML 内 容 


我 们 将 学 习 用 于 添加 新 内 容 的 四 个 jQuery 方法 : 


e append() - 在 被 选 元 素 的 结尾 插入 内 容 
e prepend() - 在 被 选 元 素 的 开头 插入 内 容 
after() - 在 被 选 元 素 之 后 插入 内 容 
before() - 在 被 选 元 素 之 前 插入 内 容 


jQuery append() 方法 
jQuery append() 方法 在 被 选 元 素 的 结尾 插入 内 容 。 
实例 


$("p").append("Some appended text."); 


jQuery prepend() 方法 
jQuery prepend() 方法 在 被 选 元 素 的 开头 插入 内 容 。 
实例 


$("p").prepend("Some prepended text."); 


通过 append() 和 prepend() 方法 添加 若干 新 元 素 


在 上 面 的 例子 中 ， 我 们 只 在 被 选 元 素 的 开头 /结尾 插入 文本 /HTML。 


不 过 ，append() 和 prepend() 方法 能 够 通过 参数 接收 无 限 数量 的 新 元 素 。 可 以 通过 jQuery 来 
生成 文本 /HTML (就 像 上 面 的 例子 那样 ) ， 或 者 通过 JavaScript 代码 和 DOM 元 素 。 


在 下 面 的 例子 中 ， 我 们 创建 若干 个 新 元 素 。 这 些 元 素 可 以 通过 text/HTML, jQuery 或 者 
JavaScript/DOM 来 创建 。 然 后 我 们 通过 append() 方法 把 这 些 新 元 素 追 加 到 文本 中 (对 
prepend() 同样 有 效 ) 


实例 


function appendText() 


{ 

var txt1="<p>Text.</p>"; // 以 HTML 创建 新 元 素 
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建 新 元 素 
var txt3=document.createElement("p"); // 以 DOM 创建 新 元 素 
txt3.innerHTML="Text."; 

$("p") .append(txt1, txt2, txt3); // 追加 新 元 素 


jQuery after() 和 before() 方法 


jQuery after() 方法 在 被 选 元 素 之 后 插入 内 容 。 
jQuery before() 方法 在 被 选 元 素 之 前 插入 内 容 。 


实例 


$("img").after("Some text after"); 


$("img").before("Some text before"); 


通过 after() 和 before() 方法 添加 若干 新 元 素 


after() 和 before() 方法 能 够 通过 参数 接收 无 限 数量 的 新 元 素 。 可 以 通过 text/HTML, jQuery 
或 者 JavaScript/DOM 来 创建 新 元 素 。 


在 下 面 的 例子 中 ， 我 们 创建 若干 新 元 素 。 这 些 元 素 可 以 通过 text/HTML、jQuery 或 者 
JavaScript/DOM 来 创建 。 然 后 我 们 通过 after) 方法 把 这 些 新 元 素 插 到 文本 中 (对 before() FA 
样 有 效 ) 


RP 
实例 
function afterText() 
{ 
var txt1="<b>I </b>"; // 以 HTML 创建 新 元 素 
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建 新 元 素 


var txt3=document.createElement("big"); // 通过 DOM 创建 新 元 素 
txt3.innerHTML="jQuery!"; 

$("img").after(txt1, txt2, txt3); // 在 img 之 后 插入 新 元 素 
} 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 删除 元 素 


通过 jQuery， 可 以 很 容易 地 删除 已 有 的 HTML TR. 


删除 元 素 / 内 容 


如 需 删 除 元 素 和 内 容 ， 一 般 可 使 用 以 下 两 个 jQuery 方法 : 


。 remove() - 删除 被 选 元 素 (及 其 子 元 素 ) 
。 empty() - 从 被 选 元 素 中 删除 子 元 素 


jQuery remove() 方法 
jQuery remove() 方法 删除 被 选 元 素 及 其 子 元 素 。 


实例 


$("#divi").remove(); 


jQuery empty() 方法 
jQuery empty() 方法 删除 被 选 元 素 的 子 元 素 。 
实例 


$("#divi").empty(); 


it 7 AK Ht BREITES 


jQuery remove() 方法 也 可 接受 一 个 参数 ， 人 允许 您 对 被 删 元 素 进行 过 小。 
该 参数 可 以 是 任何 jQuery 选择 器 的 语法 。 


下 面 的 例子 删除 class="italic" 的 所 有 <p> 元 素 : 


实例 


$("p").remove(".italic"); 


jQuery HTML 参考 手册 


如 需 有 关 jQuery HTML 方法 的 完整 内 容 ， 请 访问 以 下 参考 手册 : 


jQuery - 获取 并 设置 CSS 类 
通过 jQuery， 可 以 很 容易 地 对 CSS 元 素 进 行 操作 。 


切换 类 


jQuery 操作 CSS 


jQuery 拥有 若干 进行 CSS 操作 的 方法 。 我 们 将 学 习 下 面 这 些 : 


。 addClass() - 向 被 选 元 素 添 加 一 个 或 多 个 类 

。 removeClass() - 从 被 选 元 素 删 除 一 个 或 多 个 类 

e toggleClass() - 对 被 选 元 素 进行 添加 /删除 类 的 切换 操作 
e css() - 设置 或 返回 样式 属性 


实例 样式 表 

下 面 的 样式 表 将 用 于 本 页 的 所 有 例子 : 
.important 
{ 
font-weight:bold; 


font-size:xx-large; 


.blue 


color:blue; 


jQuery addClass() 方法 


下 面 的 例子 展示 如 何 向 不 同 的 元 素 添 加 class 属性 。 当 然 ， 在 添加 类 时 ， 您 也 可 以 选取 多 个 元 
x: 


实例 


$("button").click(function(){ 
$("h1i,h2,p").addClass("blue"); 

$("div").addClass("important"); 

}); 


您 也 可 以 在 addClass() 方法 中 规定 多 个 类 : 


实例 


$("button").click(function(){ 
$("#divi").addClass("important blue"); 
); 


jQuery removeClass() 方法 
下 面 的 例子 演示 如 何不 同 的 元 素 中 删除 指定 的 class 属性 : 
实例 


$("button").click(function(){ 


$("h1,h2,p").removeClass("blue"); 
}); 


jQuery toggleClass() 方法 


下 面 的 例子 将 展示 如 何 使 用 jQuery toggleClass() 方法 。 该 方法 对 被 选 元 素 进 行 添加 /删除 类 
的 切换 操作 : 


实例 


$("button").click(function(){ 
$("h1,h2,p").toggleClass("blue"); 
}); 


jQuery css() 方法 
我 们 将 在 下 一 章 讲 解 jQuery css() 方法 。 


jQuery HTML 参考 手册 


如 需 有 关 jQuery CSS 方法 的 完整 内 容 ， 请 访问 我 们 的 jQuery CSS 操作 参考 手册 


jQuery - css() 方法 


jQuery css() 方法 

css() 方法 设置 或 返回 被 选 元 素 的 一 个 或 多 个 样式 属性 。 
返回 CSS 属性 

如 需 返 回 指定 的 CSS 属性 的 值 ， 清 使 用 如 下 语法 : 


css("propertyname") ; 
下 面 的 例子 将 返回 首 个 匹配 元 素 的 background-color 值 : 


实例 


$("p").css("background-color"); 


设置 CSS 属性 


0 需 设 置 指定 的 CSS 属性 ， 请 使 用 如 下 语法 : 


Sot 


css("propertyname", "value" ); 
下 面 的 例子 将 为 所 有 匹配 元 素 设 置 background-color 值 : 


实例 


$("p").css("background-color", "yellow"); 


设置 多 个 CSS 属性 


[0 需 设置 多 个 CSS 属性 ， 请 使 用 如 下 语法 : 


Sat 


css({"propertyname": "value", "propertyname":"value",...}); 


下 面 的 例子 将 为 所 有 匹配 元 素 设 置 background-color 和 font-size : 


实例 


$("p").css({"background-color": "yellow", "font-size":"200%"}); 


jQuery HTML 参考 手册 


如 需 有 关 jQuery CSS 方法 的 完整 内 容 ， 请 访问 我 们 的 jQuery CSS 操作 参考 手册 


jQuery - 尺寸 


通过 jQuery， 很 容易 处理 元 素 和 浏览 器 窗口 的 尺寸 。 


jQuery 尺寸 方法 
jQuery 提供 多 个 处 理 尺 寸 的 重要 方法 : 


e width() 
height() 
innerWidth( 
e innerHeight 
e outerWidth( 
e outerHeight 


) 


) 


jQuery width() 和 height() 方法 


width() 方法 设置 或 返回 元 素 的 宽度 (不 包括 内 边 距 、 边 框 或 外 边 距 ) 。 
height() 方法 设置 或 返回 元 素 的 高 度 (不 包括 内 边 距 、 边 框 或 外 边 距 ) 。 
下 面 的 例子 返回 指定 的 <div> 元 素 的 宽度 和 高 度 : 


实例 


$("button" ) ， se oe OA 
var txt=" 
txt+=" Width: " + $("#divi").width() + "</br>"; 
txt+="Height: " + $("#divi").height(); 
$("#divi") .html(txt); 

3); 


jQuery innerWidth() 和 innerHeight() 方法 


innerWidth() 方法 返回 元 素 的 宽度 (包括 内 边 距 ) 。 
innerHeight() 方法 返回 元 素 的 高 度 (包括 内 边 距 ) 。 


下 面 的 例子 返回 指定 的 <div> 元 素 的 inner-width/height : 


实例 


$("button").click(function(){ 
var txt=""; 
txt+="Inner width: " + $("#divi").innerWidth() + "</br>"; 
txtt+t="Inner height: " + $("#divi").innerHeight(); 
$("#divi") .html(txt); 

3); 


jQuery outerWidth() 和 outerHeight() 方法 


outerWidth() 方法 返回 元 素 的 宽度 (包括 内 边 距 和 边框 ) o 
outerHeight() 方法 返回 元 素 的 高 度 (包括 内 边 距 和 边框 ) 。 


下 面 的 例子 返回 指定 的 <div> 元 素 的 outer-width/height : 


实例 


$("button").click(function(){ 
var txt=""; 
txtt+="Outer width: " + $("#divi").outerwWidth() + "</br>"; 
txtt+="Outer height: " + $("#divi").outerHeight(); 
$("#divi") .html(txt); 

3); 


outerWidth(true) 方法 返回 元 素 的 宽度 (包括 内 边 距 、 边 框 和 外 边 距 ) 。 
outerHeight(true) 方法 返回 元 素 的 高 度 (包括 内 边 距 、 边 框 和 外 边 距 ) 。 


实例 


$("button").click(function(){ 
var txt=""; 
txtt+="Outer width (+margin): " + $("#divi").outerWidth(true) + "</br>"; 
txtt+="Outer height (+margin): ”+ $("#divi").outerHeight(true); 
$("#divi") .html(txt); 

}); 


jQuery - 更 多 的 width() 和 height() 


下 面 的 例子 返回 文档 (HTML 文档 ) 和 窗口 (浏览 器 视 口 ) 的 宽度 和 高 度 : 


实例 


$("button").click(function(){ 
var txt=""; 
txtt+="Document width/height: " + $(document).width(); 
txt+="x" + $(document).height() + "\n"; 
txt+="Window width/height: " + $(window) .width(); 
txt+="x" + $(window).height(); 
alert(txt); 

}); 


下 面 的 例子 设置 指定 的 <div> 元 素 的 宽度 和 高 度 : 


实例 


$("button").click(function(){ 
$("#divi") .width(500).height (500) ; 
3); 


jQuery CSS 参考 手册 


如 需 关于 jQuery Dimensions 的 完整 参考 ， 请 访问 我 们 的 jQuery 尺寸 参考 手册 。 


jQuery 


N 


itt 


E 


Xl 


jQuery 通 万 
Hs =e A? 


jQuery 通 历 ， 意 为 移动"， 用 于 根据 其 相对 于 其 他 元 素 的 关系 来 查找 ”( 或 选取 ) HTML 元 
素 。 以 某 项 选择 开始 ， 并 治 着 这 个 选择 移动 ， 直 到 抵达 您 期 望 的 元 素 为 止 。 


下 图 展示 了 一 个 家 族 树 。 通 过 jQuery 通 历 ， 您 能 够 从 被 选 (当前 的 ) 元 素 开 始 ， 轻 松 地 在 家 
族 树 中 向 上 移动 (祖先 ) ， 向 下 移动 (子孙 ) ， 水 平移 动 (同胞 ) 。 这 种 移动 被 称 为 对 DOM 
进行 通 历 。 


示 解 释 : 


<div> 


<span> <span> 


e <div> 元 素 是 <ul> 的 父 元 素 ， 同 时 是 其 中 所 有 内 容 的 祖先 。 

e <ul> 元 素 是 <li> 元 素 的 父 元 素 ， 同 时 是 <div> 的 子 元 素 

° 左边 的 <li> TRE <span> 的 父 元 素 ， <ul> 的 子 元 素 ， 同时 是 <div> 的 后 代 。 
e <span> 元 素 是 <li> 的 子 元 素 ， 同 时 是 <ul> 和 <div> 的 后 代 。 

。 两 个 <i> 元 素 是 同胞 (拥有 相同 的 父 元 素 ) 。 

e 右边 的 <li> 元 素 是 <b> 的 父 元 素 ， <ul> 的 子 元 素 ， 同 时 是 <div 的 后 代 。 

。 <b> 元 素 是 右边 的 <i> 的 子 元 素 ， 同 时 是 <u> 和 <div> Mat. 


提示 : 祖先 是 父 、 祖 父 、 鲁 祖父 等 等 。 后 代 是 子 、 孙 、 鲁 孙 等 等 。 同 胞 拥有 相同 的 父 


i J DOM 


jQuery tek T 27m DOM 的 方法 。 
通 历 方法 中 最 大 的 种 类 是 树 通 历 (tree-traversal) 。 
下 一 


章 会 讲解 如 何在 DOM 树 中 向 上 、 下 以 及 同 级 移动 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery BASS FM 


jQuery 通 历 - 415 


祖先 是 父 、 和 祖父 或 鲁 祖 父 等 等 。 


通过 jQuery, REg AEEA DOM 树 ， 以 查找 元 素 的 祖先 。 


HEE DOM 树 


这 些 jQuery 方法 很 有 有 用， 它们 用 于 向 上 通 历 DOM 树 : 


e parent() 
e parents() 
e parentsUntil() 


jQuery parent() 方法 


parent() 方法 返回 被 选 元 素 的 直接 父 元 素 。 
该 方法 只 会 向 上 一 级 对 DOM PTE Ao 


下 面 的 例子 返回 每 个 <span> 元 素 的 的 直接 父 元 素 : 


实例 


$(document ).ready(function(){ 
$("Span").parent(); 
); 


jQuery parents() 方法 
parents() 方法 返回 被 选 元 素 的 所 有 祖先 元 素 ， 它 一 路 向 上 直到 文档 的 根 元 素 (<html>)。 


下 面 的 例子 返回 所 有 <span> 元 素 的 所 有 祖先 : 


实例 


$(document ) ,ready(function(){ 
$("Span").parents(); 
}); 


您 也 可 以 使 用 可 选 参数 来 过 滤 对 祖先 元 素 的 搜索 。 
下 面 的 例子 返回 所 有 <span> 元 素 的 所 有 祖先 ， 并 且 它 是 <ul> 元 素 : 


实例 


$(document ) ,ready(function(){ 
$("Span").parents("ul"); 


jQuery parentsUntil() 方法 


parentsUntil() 方法 返回 介 于 两 个 给 定 元 素 之 间 的 所 有 祖先 元 素 。 
下 面 的 例子 返回 介 于 <span> 与 <div> 元 素 之 间 的 所 有 祖先 元 素 : 


实例 


$(document ).ready(function(){ 
$("Span").parentsUntil("div"); 
}); 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery BHA, tix ABA jQuery EASE. 


jQuery m - 后代 


后 代 是 子 、 孙 、 便 孙 等 等 。 


通过 jQuery, EEA MEA DOM 树 ， 以 查找 元 素 的 后 代 。 


[A] Ris 4 DOM 树 


Täta NAFA TEA DOM WÉI jQuery 方法 : 


e children() 
e find() 


jQuery children() 方法 


children() 方法 返回 被 选 元 素 的 所 有 直接 子 元 素 。 
该 方法 只 会 向 下 一 级 对 DOM 树 进 行 通 历 。 


下 面 的 例子 返回 每 个 <div> 元 素 的 所 有 直接 子 元 素 : 


实例 


$(document ).ready(function(){ 
$("div").children(); 
3); 


您 也 可 以 使 用 可 选 参数 来 过 滤 对 子 元 素 的 搜索 。 
下 面 的 例子 返回 类 名 为 "1" 的 所 有 <p> 元 素 ， 并 且 它 们 是 <div> 的 直接 子 元 素 : 


实例 


$(document).ready(function(){ 
$("div").children("p.1"); 
}); 


jQuery find() 方法 


find() 方法 返回 被 选 元 素 的 后 代 元 素 ， 一 路 向 下 直到 最 后 一 个 后 代 。 


下 面 的 例子 返回 属于 <div> 后 代 的 所 有 <span> 元 素 : 


实例 


$(document ) ,ready(function(){ 
$("div").find("span"); 
3); 


下 面 的 例子 返回 <div> 的 所 有 后 代 : 


实例 


$(document ) ,ready(function(){ 
$("div") MInd (Say, 
}); 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery BHA, tix ABA jQuery BASS Mi 


jQuery m% - 同胞 


同胞 拥有 相同 的 父 元 素 。 


通过 jQuery， 您 能 够 在 DOM 树 中 通 历 元 素 的 同胞 元 素 。 


在 DOM 树 中 水 平 通 历 


有 许多 有 用 的 方法 让 我 们 在 DOM 树 进行 水 平静 历 : 


e siblings() 
e next() 

e nextAll() 
e nextUntil() 
e prev() 

e prevAll() 
e prevUntil() 


jQuery siblings() 方法 
siblings() 方法 返回 被 选 元 素 的 所 有 同胞 元 素 。 


下 面 的 例子 返回 <h2> 的 所 有 同胞 元 素 : 


实例 


$(document ).ready(function(){ 
$("h2").siblings(); 
}); 


您 也 可 以 使 用 可 选 参数 来 过 滤 对 同胞 元 素 的 搜索 。 
下 面 的 例子 返回 属于 <h2> 的 同胞 元 素 的 所 有 <p> 元 素 : 


实例 


$(document ) ,ready(function(){ 
$("h2").siblings("p"); 
}); 


jQuery next() 方法 


next() 方法 返回 被 选 元 素 的 下 一 个 同胞 元 素 。 
该 方法 只 返回 一 个 元 素 。 


下 面 的 例子 返回 <h2> 的 下 一 个 同胞 元 素 : 


实例 


$(document ).ready(function(){ 
$("h2").next(); 
}); 


jQuery nextAll() 方法 
nextAll() 方法 返回 被 选 元 素 的 所 有 跟随 的 同胞 元 素 。 


下 面 的 例子 返回 <h2> 的 所 有 跟随 的 同胞 元 素 : 


实例 


$(document).ready(function(){ 
$("h2").nextAll(); 
3); 


jQuery nextUntil() 方法 
nextUntil() 方法 返回 介 于 两 个 给 定 参 数 之 间 的 所 有 跟随 的 同胞 元 素 。 


下 面 的 例子 返回 介 于 <h2> 与 <h6> 元 素 之 间 的 所 有 同胞 元 素 : 


实例 


$(document ).ready(function(){ 
$("h2").nextUntil("h6"); 
3); 


jQuery prev(), prevAll() & prevUntil() 方法 


prev(), prevAll() 以 及 prevUntil() 方法 的 工作 方式 与 上 面 的 方法 类 似 ， 只 不 过 方向 相反 而 已 : 
它们 返回 的 是 前 面 的 同胞 元 素 (在 DOM 树 中 治 着 同胞 元 素 向 后 下 历 ， 而 不 是 向 前 ) o 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery BASS FM 


jQuery m 7 - 过 滤 


缩写 搜索 元 乘 的 沁 转 


三 个 最 基本 的 过 滤 方 法 是 : first(), last() 和 eq()， 它 们 人 允许 您 基于 其 在 一 组 元 素 中 的 位 置 来 选 
择 一 个 特定 的 元 素 。 


其 他 过 滤 方 法 ， 比 如 filter() 和 not() 人 允许 您 选取 匹配 或 不 匹配 某 项 指定 标准 的 元 素 。 


jQuery first() 方法 
first() 方法 返回 被 选 元 素 的 首 个 元 素 。 


下 面 的 例子 选取 首 个 <div> 元 素 内 部 的 第 一 个 <p> IER : 


实例 


$(document).ready(function(){ 
$("div p").first(); 
}); 


jQuery last() 方法 
last() 方法 返回 被 选 元 素 的 最 后 一 个 元 素 。 


下 面 的 例子 选择 最 后 一 个 <div> 元 素 中 的 最 后 一 个 <p> 元 素 : 


实例 


$(document).ready(function(){ 
$("div p").last(); 
); 


jQuery eq() 方法 
eq) 方法 返回 被 选 元 素 中 带 有 指定 索引 号 的 元 素 。 


索引 号 从 0 开始 ， 因 此 首 个 元 素 的 索引 号 是 0 而 不 是 1。 下 面 的 例子 选取 第 二 个 <p> 元 素 
(索引 号 1) : 


实例 


$(document ) ,ready(function(){ 
ay ee eel 


jQuery filter() 方法 


filter() 方法 允许 您 规定 一 个 标准 。 不 匹配 这 个 标准 的 元 素 会 被 从 集合 中 删除， 匹配 的 元 素 会 被 
返回 。 


下 面 的 例子 返回 带 有 类 名 "intro" 的 所 有 <p> TR : 


实例 


$(document).ready(function(){ 
$("p").filter(".intro"); 
H); 


jQuery not() 方法 

not() 方法 返回 不 匹配 标准 的 所 有 元 素 。 

提示 : not() 方法 与 filter() AR. 

下 面 的 例子 返回 不 带 有 类 名 "intro" 的 所 有 <p> 元 素 : 


实例 


$(document).ready(function(){ 
$("p").not(".intro"); 
3); 


jQuery 通 万 参考 手册 


如 需 了 解 所 有 的 jQuery 通 历 方法 ， 请 访问 我 们 的 jQuery BASS MM 


jQuery - AJAX 


jQuery - AJAX 简介 


AJAX 是 与 服务 器 交换 数据 的 艺术 ， 它 在 不 重 载 全 部 页 面 的 情况 下 ， 实 现 了 对 部 分 网 页 的 更 
新 。 


jQuery AJAX 实例 


<script>$(document).ready(function(){ $("#btni").click(function(){ $('#test').load('/exam 
<h3> 请 点 击 下 面 的 按钮 ， 通 过 jQuery AJAX 改变 这 段 文 本 。</h3> 


<button id="btni" type="button"> 获 得 外 部 的 内 容 </button> 


VEA ES 





什么 是 AJAX ? 

AJAX = 异步 JavaScript 和 XML (Asynchronous JavaScript and XML) 。 

简短 地 说 ， 在 不 重 载 整个 网 页 的 情况 下 ，AJAX 通过 后 台 加 载 数据 ， 并 在 网 页 上 进行 显示 。 
使 用 AJAX 的 应 用 程序 案例 : 谷歌 地 图 、 腾 讯 微 博 、 优 酷 视频 、 人 人 网 等 等 。 

您 可 以 在 我 们 的 AJAX 教程 中 学 到 更 多 有 关 AJAX 的 知识 。 


关于 jQuery 与 AJAX 


jQuery 提供 多 个 与 AJAX 有 关 的 方法 。 


通过 jQuery AJAX 方法 ， 您 能 够 使 用 HTTP Get 和 HTTP Post 从 远程 服务 器 上 请 求 文本 、 
HTML, XML 或 JSON - 同时 您 能 够 把 这 些 外 部 数据 直接 载 和 人 网 页 的 被 选 元 素 中 。 


提示 : 如 果 没 有 jQuery，AJAX 编程 还 是 有 些 难度 的 。 


编写 常规 的 AJAX 代码 并 不 容易 ， 因 为 不 同 的 浏览 器 对 AJAX 的 实现 并 不 相同 。 这 意味 着 您 
必须 编写 额外 的 代码 对 浏览 器 进行 测试 。 不 过 ，jQuery 团队 为 我 们 解决 了 这 个 难题 ， 我 们 只 
需要 一 行 简单 的 代码 ， 就 可 以 实现 AJAX 功能 。 


jQuery AJAX 方法 


在 下 面 的 章节 ， 我 们 将 学 习 到 最 重要 的 jQuery AJAX 方法 。 


jQuery - AJAX load() 方法 


jQuery load() 方法 


jQuery load() 方法 是 简单 但 强大 的 AJAX 方法 。 
load() 方法 从 服务 器 加 载 数据 ， 并 把 返回 的 数据 放 和 被 选 元 素 中 。 


语法 : 


$(_selector_).load(_URL_,_data_,_callback_); 





必需 的 URL 参数 规定 您 希望 加 载 的 URL. 


吕 | 


需 的 
选 的 data 参数 规定 与 请 求 一 同 发 送 的 查询 字符 串 键 / 值 对 集合 。 
选 的 


可 选 的 callback 参数 是 load() 方法 完成 后 所 执行 的 函数 名 称 。 


这 是 示例 文件 ("demo_test.txt") HAR: 


<h2>jQuery and AJAX is FUN!!!</h2> 
<p id="pi">This is some text in a paragraph.</p> 


下 面 的 例子 会 把 文件 "demo test.txt" 的 内 容 加 载 到 指定 的 <div> 元 素 中 : 
示例 
$("#divi").load("demo_test.txt"); 


也 可 以 把 jQuery 选择 器 添加 到 URL 参数 。 


下 面 的 例子 把 "demo_test.txt" 文件 中 id="p1" 的 元 素 的 内 容 ， 加 载 到 指定 的 <div> 元 素 中 : 
实例 
$("#divi").load("demo_test.txt #p1"); 


可 选 的 callback 参数 规定 当 load() 方法 完成 后 所 要 人 允许 的 回调 函数 。 回 调 男 数 可 以 设置 不 同 
的 参数 : 


e responseTxt - 包含 调用 成 功 时 的 结果 内 容 
e statusTXT - 包含 调用 的 状态 
e Xxhr -包含 XMLHttpRequest 对 象 


下 面 的 例子 会 在 load) 方法 完成 后 显示 一 个 提示 框 。 如 果 load() 方法 已 成 功 ， 则 显示 “外 部 内 
容 加 载 成 功 1 "， 而 如 果 失 败 ， 则 显示 错误 消息 : 


实例 


$("button").click(function(){ 
$("#divi").load("demo_test.txt", function(responseTxt, statusTxt, xhr){ 
if(statusTxt=="success") 
alert ("AMAA MRR !"); 
if(statusTxt=="error") 
alert("Error: "+xhr.statust+": "+xhr.statusText); 
3); 
3); 


jQuery AJAX 参考 手册 


如 需 完整 的 AJAX 方法 参考 ， 请 访问 我 们 的 jQuery AJAX 参考 手册 。 


jQuery - AJAX get() 和 post() 方法 


jQuery get() 和 post() 方法 用 于 通过 HTTP GET 或 POST 请 求 从 服务 器 请 求 数据 。 


HTTP 请 求 : GET vs. POST 


两 种 在 客户 端 和 服务 器 端 进行 请 求 -响应 的 常用 方法 是 : GET 和 POST. 


e GET- 从 指定 的 资源 请 求 数据 
e POST - 向 指定 的 资源 提交 要 处 理 的 数据 


GET 基本 上 用 于 从 服务 器 获得 (WE) 数据 。 注 释 : GET 方法 可 能 返回 缓存 数据 。 


POST 也 可 用 于 从 服务 器 获取 数据 。 不 过 ，POST 方法 不 会 缓存 数据 ， 并 且 常 用 于 连同 请 求 
一 起 发 送 数据 。 


如 需 学 习 更 多 有 关 GET 和 POST 以 及 两 方法 差异 的 知识 ， 请 阅读 我 们 的 HTTP H -GET 
对 比 POST。 


jQuery $.get() 方法 
$.get() 方法 通过 HTTP GET 请 求 从 服务 器 上 请 求 数据 。 
语法 : 
$.get(_URL_,_callback_); 
必需 的 URL 参数 规定 您 希望 请 求 的 URL, 
EAA callback 参数 是 请 求 成 功 后 所 执行 的 函数 名 。 
下 面 的 例子 使 用 $.get() 方法 从 服务 器 上 的 一 个 文件 中 取 回 数据 : 
实例 


$("button").click(function(){ 
$.get("demo_test.asp", function(data, status) { 
alert("Data: " + data + "\nStatus: " + status); 
3); 
}); 


$.get() 的 第 一 个 参数 是 我 们 希望 请 求 的 URL ("demo_test.asp") 。 


第 二 个 参数 是 回调 函数 。 第 一 个 回调 参数 存 有 被 请 求 页 面 的 内 容 ， 第 二 个 回调 参数 存 有 请 求 
的 状态 。 


提示 : 这 个 ASP 文件 ("demo test.asp") 类 似 这 样 


<% 
response.write("This is some text from an external ASP file.") 
%> 


jQuery $.post() 方法 


$.post() 方法 通过 HTTP POST 请 求 从 服务 器 上 请 求 数据 。 
语法 : 


$.post(_URL_,_data_,_callback_); 





必需 的 URL 参数 规定 您 希望 请 求 的 URL。 
可 选 的 data 参数 规定 连同 请 求 发 送 的 数据 。 

At BY callback 参数 是 请 求 成 功 后 所 执行 的 函数 名 。 
下 面 的 例子 使 用 $.post() 连同 请 求 一 起 发 送 数据 : 


实例 


$("button").click(function(){ 
$.post("demo_test_post.asp", 
{ 


name:"Donald Duck", 
city: "Duckburg" 


function(data, status) { 
alert("Data: " + data + "\nStatus: " + status); 


H; 
H; 


$.post) 的 第 一 个 参数 是 我 们 希望 请 求 的 URL ("demo_test_post.asp")。 
然后 我 们 连同 请 求 (name 和 city) 一 起 发 送 数据 。 
"demo_test_post.asp" 中 的 ASP 脚本 读 取 这 些 参 数 ， 对 它们 进行 处 理 ， 然 后 返回 结果 。 


第 三 个 参数 是 回调 函数 。 第 一 个 回调 参数 存 有 被 请 求 页 面 的 内 容 ， 而 第 二 个 参数 存 有 请 求 的 
状态 。 


提示 : 这 个 ASP 文件 ("demo test_post.asp") 类 似 这 样 : 


<% 

dim fname, city 

fname=Request .Form("name" 

city=Request.Form("city") 

Response.Write("Dear " & fname & ". ") 
Response.Write("Hope you live well in" & city & ".") 
%> 


jQuery AJAX 参考 手册 


如 需 完整 的 AJAX 方法 参考 ， 请 访问 我 们 的 jQuery AJAX 参考 手册 。 


jQuery 杀 项 


jQuery - noConflict() 方法 


如 何在 页 面 上 同时 使 用 jQuery 和 其 他 框架 ? 


jQuery 和 其 他 JavaScript 框架 


正如 您 已 经 了 解 到 的 ，jQuery 使 用 $ 符号 作为 jQuery 的 简写 。 
如 果 其 他 JavaScript 框架 也 使 用 $ 符号 作为 简写 怎么 办 ? 


其 他 一 些 JavaScript 框架 包括 : Mootools, Backbone, Sammy, Cappuccino, Knockout, 
JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman 以 及 Ext JS. 


其 中 某 些 框架 也 使 用 $ 符号 作为 简写 (k jQuery) ， 如 果 您 在 用 的 两 种 不 同 的 框架 正在 使 
用 相同 的 简写 符号 ， 有 可 能 导致 脚本 停止 运行 。 


jQuery 的 团队 考虑 到 了 这 个 问题 ， 并 实现 了 noConflict() 方法 。 


jQuery noConflict() 方法 


noConflict() 方法 会 释放 会 $ 标识 符 的 控制 ， 这 样 其 他 脚本 就 可 以 使 用 它 了 。 


实例 
当然 ， 您 仍然 可 以 通过 全 名 替代 简写 的 方式 来 使 用 jQuery : 


$.noConflict(); 

jQuery(document ).ready(function(){ 
jQuery("button").click(function(){ 

jQuery("p").text("jQuery 仍 在 运行 1"); 


} 
}); 


实例 


您 也 可 以 创建 自己 的 简写 。noConflict() 可 返回 对 jQuery 的 引用 ， 您 可 以 把 它 存 人 变量 ， 以 供 
稍 后 使 用 。 请 看 这 个 例子 : 


var jq = $.noConflict(); 
jq(document ).ready(function(){ 
jq("button").click(function()f{ 
jq("p").text("jQuery 仍 在 运行 1 "); 
}); 


}); 


实例 


如 果 你 的 jQuery 代码 块 使 用 $ 简写 ， 并 且 您 不 愿意 改变 这 个 快捷 方式 ， 那 么 您 可 以 把 $ 符号 
作为 变量 传递 给 ready 方法 。 这 样 就 可 以 在 函数 内 使 用 $ 符号 了 - 而 在 函数 外 ， 依 旧 不 得 不 
使 用 "jQuery" : 


$.noConflict(); 
jQuery(document ).ready(function($) { 
$("button").click(function(){ 
$("p").text("jQuery 仍 在 运行 1 "); 
}); 
}); 


jQuery 核心 参考 手册 


如 需 完整 的 jQuery 核心 方法 概览 ， 请 访问 我 们 的 jQuery 核心 参考 手册 。 


JavaScript 高 级 教程 


JavaScript 的 历史 


为 了 发 挥 JavaScript 的 全 部 潜力 ， 了 解 它 的 本 质 、 历史 及 局 限 性 是 十 分 重要 的 。 
本 节 为 您 讲解 JavaScript 和 客户 端 脚本 的 起 源 。 


Nombas 和 ScriptEase 


大 概 在 1992 年 ， 一 家 称 作 Nombas 的 公司 开发 了 一 种 叫做 C 减 减 (C-minus-minus, $ FR 
Cmm) 的 做 入 式 脚本 语言 。Cmm 背后 的 理念 很 简单 : 一 个 足够 强大 可 以 替代 宏 操 作 

(macro) 的 脚本 语言 ， 同 时 保持 与 C (和 C ++) 足够 的 相似 性 ， 以 便 开 发 人 员 能 很 快 学 
会 。 这 个 脚本 语言 捆绑 在 一 个 叫做 CEnvi 的 共享 软件 中 ， 它 首次 向 开发 人 员 展 示 了 这 种 语言 
的 威力 。 


Nombas 最 终 把 Cmm 的 名 字 改 成 了 ScriptEase， 原 因 是 后 面 的 部 分 (mm) 听 起 来 过 于 消 
AR, Talat REC “SABI”. 


现在 ScriptEase 已 经 成 为 了 Nombas 产品 背后 的 主要 驱动 力 。 


Netscape 发 明了 JavaScript 


当 Netscape Navigator #224 fan, Nombas 开发 了 一 个 可 以 伐 入 网 页 中 的 CEnvi 的 版 本 。 
这 些 早期 的 试验 被 称 为 Espresso Page 〈 浓 咖啡 般 的 页 面 ) ， 它 们 代表 了 第 一 个 在 万 维 网 上 
使 用 的 客户 端 语 言 。 而 Nombas 丝毫 没有 料 到 它 的 理念 将 会 成 为 万 维 网 的 一 块 重要 基石 。 


当 网 上 冲浪 越 来 越 流行 时 ， 对 于 开发 客户 端 脚 本 的 需求 也 逐渐 增 大 。 此 时 ， 大 部 分 因特网 用 
户 还 仅仅 通过 28.8 kbit/s 的 调制 解 调 器 连接 到 网 络 ， 即 便 这 时 网 页 已 经 不 断 地 变 得 更 大 和 更 
复杂 。 而 更 加 加 剧 用 户 痛苦 的 是 ， 仅 仅 为 了 简单 的 表单 有 效 性 验证 ， 就 要 与 服务 器 进行 多 次 
地 往返 交互 。 设 想 一 下 ， 用 户 填 完 一 个 表单 ， 点 击 提交 按钮 ， 等 待 了 30 秒 的 处 理 后 ， 看 到 的 
却 是 一 条 告诉 你 忘记 填写 一 个 必要 的 字段 。 


那 时 正义 于 技术 革新 最 前 治 的 Netscape， 开 始 认 真 考虑 开发 一 种 客户 端 脚本 语言 来 解决 简单 
的 处 理 问 题 。 


当时 工作 于 Netscape 的 Brendan Eich， 开 始 着 手 为 即将 在 1995 年 发 行 的 Netscape 
Navigator 2.0 开发 一 个 称 之 为 LiveScript 的 脚本 语言 ， 当 时 的 目的 是 在 浏览 器 和 服务 器 (本 
来 要 叫 它 LiveWire) 端 使 用 它 。Netscape 与 Sun 及 时 完成 LiveScript 实现 。 


就 在 Netscape Navigator 2.0 即将 正式 发 布 前 ，Netscape 将 其 更 名 为 JavaScript， 目 的 是 为 
了 利用 Java & SAA a iq sc. Netscape 的 赌注 最 终 得 到 回报 ，JavaScript MEE% T 
因特网 的 必 备 组 件 。 


ZERU 


因为 JavaScript 1.0 如 此 成 功 ，Netscape 在 Netscape Navigator 3.0 FRAT 1.1 版 。 恰 巧 
那个 时 候 ， 微 软 决 定 进军 浏览 器 ， 发 布 了 IE 3.0 并 搭载 了 一 个 JavaScript 的 克隆 版 ， 叫 做 
JScript (这 样 命名 是 为 了 避免 与 Netscape 潜在 的 许可 纠纷 ) 。 微 软 步 和 人 Web 浏览 器 领域 的 
这 重要 一 步 虽 然 令 其 声名 狼藉 ， 但 也 成 为 JavaScript 语言 发 展 过 程 中 的 重要 一 步 。 


在 微软 进入 后 ， 有 3 种 不 同 的 JavaScript 版 本 同时 存在 : Netscape Navigator 3.0 中 的 
JavaScript, IE 中 的 JScript 以 及 CEnvi 中 的 ScriptEase。 与 C 和 其 他 编程 语言 不 同 的 是 ， 
JavaScript 并 没有 一 个 标准 来 统一 其 语法 或 特性 ， 而 这 3 种 不 同 的 版 本 恰恰 突出 了 这 个 问 
题 。 随 着 业界 担心 的 增加 ， 这 个 语言 的 标准 化 显然 已 经 势 在 必 行 。 


标准 化 


1997 年 ，JavaScript 1.1 作为 一 个 草案 提交 给 欧洲 计算 机 制造 商 协会 (ECMA) 。 第 39 技术 
委员 会 (TC39) 被 委派 来 “标准 化 一 个 通用 、 足 平台、 中立 于 厂商 的 脚本 语言 的 语法 和 请 

义 "(http:/www.ecma-international.org/memento/TC39.htm)。 由 来 自 Netscape、Sun、 微 
软 、Borland 和 其 他 一 些 对 脚本 编程 感 兴趣 的 公司 的 程序 员 组 成 的 TC39 锤炼 出 了 ECMA- 
262， 该 标准 定义 了 名 为 ECMAScript 的 全 新 脚本 语言 。 


在 接 下 来 的 几 年 里 ， 国 际 标准 化 组 织 及 国际 电工 委员 会 (ISO/IEC) 也 采纳 ECMAScript 作为 
标准 (ISO/IEC-16262) 。 从 此 ，Web 浏览 器 就 开始 努力 (虽然 有 着 不 同 的 程度 的 成 功 和 失 
w) {$ ECMAScript 作为 JavaScript 实现 的 基础 。 


JavaScript 实现 


JavaScript 的 核心 ECMAScript 描述 了 该 语言 的 语法 和 基本 对 象 ; 
DOM 描述 了 处理 网 页 内 容 的 方法 和 接口 ; 


BOM 描述 了 与 浏览 器 进行 交互 的 方法 和 接口 。 


ECMAScript. DOM 和 BOM 


RE ECMAScript 是 一 个 重要 的 标准 ， 但 它 并 不 是 JavaScript 唯一 的 部 分 ， 当 然 ， 也 不 是 唯 
一 被 标准 化 的 部 分 。 实 际 上 ， 一 个 完整 的 JavaScript 实现 是 由 以 下 3 个 不 同 部 分 组 成 的 : 


e 核心 (ECMAScript) 
。 文档 对 象 模型 (DOM) 
e 浏览 器 对 象 模型 (BOM) 


JavaScript 
ECMAScript 


ECMAScript 并 不 与 任何 具体 浏览 器 相 绑 定 ， 实 际 上 ， 它 也 没有 提 到 用 于 任何 用 户 输入 输出 的 
方法 (RASC 这 类 语言 不 同 ， 它 需要 依赖 外 部 的 库 来 完成 这 类 任务 ) 。 那 么 什么 才 是 
ECMAScript 呢 ? ECMA-262 标准 (第 2 FR) 的 描述 如 下 : 


“ECMAScript 可 以 为 不 同 种 类 的 宿主 环境 提供 核心 的 脚本 编程 能 力 ， 因 此 核心 的 脚本 语 
言 是 每 任何 特定 的 宿主 环境 分 开 进 行规 定 的 .… ...” 





Web 浏览 器 对 于 ECMAScript 来 说 是 一 个 宿主 环境 ， 但 它 并 不 是 唯一 的 宿主 环境 。 事 实 上 ， 
还 有 不 计 其 数 的 其 他 各 种 环境 (例如 Nombas 的 ScriptEase， 以 及 Macromedia 同时 用 在 
Flash 和 Director MX 中 的 ActionScript) 可 以 容纳 ECMAScript 实现 。 那 么 ECMAScript 在 
浏览 器 之 外 规定 了 些 什么 呢 ? 


简单 地 说 ，ECMAScript 描述 了 以 下 内 容 : 


。 语法 


。 类 型 


。 语句 
。 关键 字 
。 保留 字 
。 运算 符 
。 对 象 


ECMAScript 仅仅 是 一 个 描述 ， 定 义 了 脚本 语言 的 所 有 属性 、 方 法 和 对 象 。 其 他 语言 可 以 实现 
ECMAScript 来 作为 功能 的 基准 ，JavaScript 就 是 这 样 : 


ECMAScript 


JavaScript Actions cript ScriptEase 


每 个 浏览 器 都 有 它 自己 的 ECMAScript 接口 的 实现 ， 然 后 这 个 实现 又 被 扩展 ， 包 含 了 DOM 和 
BOM (在 以 下 几 节 中 再 探讨 ) 。 当 然 还 有 其 他 实现 并 扩展 了 ECMAScript 的 语言 ， 例 如 
Windows 脚本 宿主 (Windows Scripting Host, WSH) 、Macromedia 在 Flash 和 Director 
MX 中 的 ActionScript， 以 及 Nombas ScriptEase。 


1. ECMAScript 的 版 本 


ECMAScript 分 成 几 个 不 同 的 版 本 ， 它 是 在 一 个 叫做 ECMA-262 的 标准 中 定义 的 。 和 其 他 标 
准 一 样 ，ECMA-262 会 被 编辑 和 更 新 。 当 有 了 主要 更 新 时 ， 就 会 发 布 一 个 标准 的 新 版 。 最 新 
ECMA-262 的 版 本 是 5.1， 于 2011 年 6 月 发 布 。 


ECMA-262 的 第 一 版 在 本 质 上 与 Netscape 的 JavaScript 1.1 是 一 样 ， 只 是 把 所 有 与 浏览 器 相 
关 的 代码 删除 了 ， 此 外 还 有 一 些小 的 调整 。 首 先 ，ECMA-262 要 求 对 Unicode 标准 的 支持 

(以 便 支持 多 语言 ) 。 第 二 ， 它 要 求 对 象 是 平台 无 关 的 (Netscape 的 JavaScript 1.1 事实 上 
有 不 同 的 对 象 实现 ， 例 如 Date 对 象 ， 是 依赖 于 平台 ) 。 这 是 JavaScript 1.1 和 1.2 为 什么 不 
符合 ECMA-262 规范 第 一 版 的 主要 原因 。 


ECMA-262 的 第 二 版 大 部 分 更 新 本 质 上 是 编辑 性 的 。 这 次 标准 的 更 新 是 为 了 与 ISO/IEC- 
16262 的 严格 一 致 ， 也 并 没有 特别 添加 、 更 改 和 删除 内 容 。ECMAScript 一 般 不 会 遵守 第 二 
版 。 


ECMA-262 第 三 版 是 该 标准 第 一 次 真正 的 更 新 。 它 提供 了 对 字符 串 义理 、 错 误 定义 和 数值 输 
出 的 更 新 。 同 时 ， 它 还 增加 了 正则 表达 式 、 新 的 控制 语句 、try...catch 异常 处 理 的 支持 ， 以 及 
一 些 为 使 标准 国际 化 而 做 的 小 改动 。 一 般 来 说 ， 它 标志 着 ECMAScript 成 为 一 种 真正 的 编程 
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2. 何谓 ECMAScript 符合 性 


在 ECMA-262 8, ECMAScript 符合 性 (conformance) 有 明确 的 定义 。 一 个 脚本 语言 必须 
满足 以 下 四 项 基本 原则 : 


。 符合 的 实现 必须 按照 ECMA-262 中 所 描述 的 支持 所 有 的 “类 型 、 值 、 对 象 、 属 性 、 郴 数 和 
程序 语言 及 语义 ”(ECMA-262， 第 一 页 ) 

。 符合 的 实现 必须 支持 Unicode 字符 标准 (UCS) 

。 符合 的 实现 可 以 增加 没有 在 ECMA-262 BIBER RAKE. GC. HR. BHM’. 
ECMA-262 将 这 些 增加 描述 为 规范 中 未 给 定 的 新 对 象 或 对 象 的 新 属性 

。 符合 的 实现 可 以 支持 没有 在 ECMA-262 中 定义 的 “程序 和 正则 表达 式 语法 ”( 意 思 是 可 以 
蔡 换 或 者 扩展 内 建 的 正则 表达 式 支 持 ) 


所 有 ECMAScript 实现 必须 符合 以 上 标准 。 


3. Web 浏览 器 中 的 ECMAScript 支持 


含有 JavaScript 1.1 的 Netscape Navigator 3.0 在 1996 年 发 布 。 然 后 ，JavaScript 1.1 规范 
被 作为 一 个 新 标准 的 草案 被 提交 给 EMCA。 有 了 JavaScript IERI RT, Netscape 十 分 高 
兴 地 开始 开发 1.2 版 。 但 有 一 个 问题 ，ECMA 并 未 接受 Netscape 的 草案 。 在 Netscape 
Navigator 3.0 发 布 后 不 久 ， 微 软 就 发 布 了 IE 3.0。 该 版 本 的 IE 含有 JScript 1.0 (微软 自己 的 
JavaScript 实现 的 名 称 ) ， 原 本 计划 可 以 与 JavaScript 1.1 相提并论 。 然 后 ， 由 于 文档 不 全 以 
及 一 些 不 当 的 重复 特性 ，JScript 1.0 远 远 没 有 达到 JavaScript 1.1 的 水 平 。 


在 ECMA-262 第 一 版 定稿 之 前 ， 发 布 含 有 JavaScript 1.2 的 Netscape Navigator 4.0 是 在 
1997 年 ， 在 那 年 晚 些 时 候 ，ECMA-262 标准 被 接受 并 标准 化 。 因 此 ，JavaScript 1.2 并 不 和 
ECMAScript 的 第 一 版 兼容 ， 虽 然 ECMAScript 应 该 基于 JavaScript 1.1. 


JScript 的 下 一 步 是 IE 4.0 中 加 入 的 JScript 3.0 (2.0 版 是 随 IIS 3.0 一 起 发 布 的 ， 但 并 未 包含 
在 浏览 器 中 ) 。 微 软 大 力 宣传 JScript 3.0 是 世界 上 第 一 个 真正 符合 ECMA 标准 的 脚本 语言 。 
而 那 时 ，ECMA-262 还 没有 最 终 定稿 ， 所 以 JScript 3.0 也 遭受 了 和 JavaScript 1.2 同样 的 命 
运 - 它 还 是 没 能 符合 最 终 的 ECMAScript 标准 。 


Netscape 选择 在 Netscape Navigator 4.06 中 升级 它 的 JavaScript 实现 。JavaScript 1.3 使 
Netscape 终于 完全 符合 了 ECMAScript 第 一 版 。Netscape 加 入 了 对 Unicode 标准 的 支持 ， 
并 让 所 有 的 对 象 保留 了 在 JavaScript 1.2 中 引入 的 新 特性 的 同时 实现 了 平台 独立 。 


当 Netscape 将 它 的 源 代码 作为 Mozilla 项 目 公布 于 众 时 ， 本 来 计划 JavaScript 1.4 HARA 
到 Netscape Navigator 5.0 中 。 然 而 ， 一 个 冒进 的 决定 - 要 完全 从 头 重新 设计 Netscape 的 代 
码 ， 破 坏 了 这 个 工作 。JavaScript 1.4 仅仅 作为 一 个 Netscape Enterprise Server 的 服务 器 端 
脚本 语言 发 布 ， 以 后 也 没有 被 放 和 人 浏览 器 中 。 


如 今 ， 所 有 主流 的 Web 浏览 器 都 遵守 ECMA-262 第 三 版 。 


下 面 的 表格 列 出 了 大 部 分 流行 的 Web 浏览 器 中 的 ECMAScript 支持 : 


浏览 圳 DOM 兼容 性 
Netscape Navigator 2.0 z 
Netscape Navigator 3.0 = 
Netscape Navigator 4.0 - 4.05 - 
Netscape Navigator 4.06 - 4.79 Edition 1 
Netscape 6.0+ (Mozilla 0.6.0+) Edition 3 
Internet Explorer 3.0 = 


Internet Explorer 4.0 - 


Internet Explorer 5.0 Edition 1 
Internet Explorer 5.5+ Edition 3 
Opera 6.0 - 7.1 Edition 2 
Opera 7.2+ Edition 3 
Safari 1.0+/Konqueror ~ 2.0+ Edition 3 


DOM 


DOM (文档 对 象 模 型 )》 是 HTML 和 XML 的 应 用 程序 接口 (API) 。DOM 将 把 整个 页 面 规划 
成 由 节点 层级 构成 的 文档 。HTML 或 XML 页 面 的 每 个 部 分 都 是 一 个 节点 的 衍生 物 。 请 考虑 下 
may HTML 页 面 : 


<html> 
<head> 
<title>Sample Page</title> 
</head> 
<body> 
<p>hello world!</p> 
</body> 
</html> 


这 段 代 码 可 以 用 DOM 绘制 成 一 个 节点 层次 图 : 






Sample Page 


Hello World! 


DOM 通过 创建 树 来 表示 文档 ， 从 而 使 开发 者 对 文档 的 内 容 和 结构 具有 空前 的 控制 力 。 用 
DOM API 可 以 轻松 地 删除 、 添 加 和 蔡 换 节点 。 


1. 为 什么 DOM 必 不 可 少 


自从 IE 4.0 和 Netscape Navigator 4.0 开始 支持 不 同形 态 的 动态 HTML (DHTML) ， 开 发 者 
首次 能 够 在 不 重 载 网 页 的 情况 下 修改 它 的 外 观 和 内 容 。 这 是 Web 技术 的 一 大 飞跃 ， 不 过 也 带 
来 了 巨大 的 问题 。Netscape 和 微软 各 自 开 发 自己 的 DHTML， 从 而 结束 了 Web 开发 者 只 编写 
一 个 HTML 页 面 就 可 以 在 所 有 浏览 器 中 访问 的 时 期 。 


业界 决定 必须 要 做 点 什么 以 保持 Web 的 跨 平 台 特 性 ， 他 们 担心 如 果 放 任 Netscape 和 微软 公 
司 这 样 做 ，Web 必 将 分 化 为 两 个 独立 的 部 分 ， 每 一 部 分 只 适用 于 特定 的 浏览 器 。 因 此 ， 负 责 
指定 Web 通信 标准 的 团体 W3C (World Wide Web Consortium) 就 开始 制定 DOM。 


2. DOM 的 各 个 level 


DOM Level 1 Æ W3C F 1998 年 10 月 提出 的 。 它 由 两 个 模块 组 成 ， 即 DOM Core 和 DOM 
HTML。 前 者 提供 了 基于 XML 的 文档 的 结构 图 ， 以 便 访问 和 操作 文档 的 任意 部 分 ; 后 者 添加 
了 一 些 HTML 专用 的 对 象 和 方法 ， 从 而 扩展 了 DOM Core。 


注意 ，DOM 不 是 JavaScript 专 有 的 ， 事 实 上 许多 其 他 语言 都 实现 了 它 。 不 过 ，Web 浏览 器 
中 的 DOM 已 经 用 ECMAScript 实现 了 ， 现 在 是 JavaScript 语言 的 一 个 很 大 组 成 部 分 。 


DOM Level 1 只 是 一 个 目标 ， 即 规划 文档 的 结构 ，DOM Level 2 的 目标 就 广泛 多 了 。 对 原始 
DOM 的 扩展 添加 了 对 鼠标 和 用 户 界 面 事件 (DHTML 对 此 有 丰富 的 支持 ) 、 范 围 、 通 万 (E 
复 执 行 DOM 文档 的 方法 ) 的 支持 ， 并 通过 对 象 接口 添加 了 对 CSS (ARAR) 的 支持 。 
由 Level 1 引入 的 原始 DOM Core 也 加 入 了 对 XML 命名 空间 的 支持 。 


DOM Level 2 引入 了 几 种 DOM 新 模块 ， 用 于 义理 新 的 接口 类 型 : 


。 DOM 视图 - 描述 跟踪 文档 的 各 种 视图 ( 即 CSS 样式 化 之 前 和 CSS 样式 化 之 后 的 文档 ) 
。 DOM 事件 - 描述 事件 的 接口 

e DOM 样式 - 描述 义理 基于 CSS 样式 的 接口 

。 DOM 通 万 和 范围 - 描述 通 万 和 操作 文档 树 的 接口 


DOM Level 3 引入 了 以 统一 的 方式 载 信 和 保持 文档 的 方法 (包含 在 新 模块 DOM Load and 
Save) 以 及 验证 文档 (DOM Validation) 的 方法 ， 从 而 进一步 扩展 了 DOM。 在 Level 3 中 ， 
DOM Core 被 扩展 为 支持 所 有 的 XML 1.0 特性 ， 包 括 XML Infoset、XPath 和 XML Base. 


在 学 习 DOM 时 ， 可 能 会 遇 到 有 人 引用 DOM Level 0。 注 意 ， 根 本 没有 DOM Level 0 这 个 标 
准 ， 它 只 是 DOM 的 一 个 历史 参考 点 (DOM Level 0 指 的 是 IE 4.0 和 Netscape Navigator 4.0 
中 支持 的 原始 DHTML) 。 


3. 其 他 DOM 


ml 


除了 DOM Core 和 DOM HTML 外 ， 还 有 其 他 几 种 语言 发 布 了 自己 的 DOM 标准 。 这 些 语 
都 是 基于 XML 的 ， 每 种 DOM 都 给 对 应 语言 添加 了 特有 的 方法 和 接口 : 


e 可 缩放 矢量 语言 (SVG) 1.0 
e 数字 标记 语言 (MathML) 1.0 
。 同步 多 媒体 集成 语言 (SMIL) 


注释 : 如 果 希 望 学 习 更 多 相关 内 容 ， 请 访问 W3school 的 SMIL 教程 和 SVG 教程 。 


此 外 ， 其 他 语言 也 开发 了 自己 的 DOM 实现 ， 如 Mozilla 的 XML 用 户 界面 语言 (XUL) 。 不 
过 ， 只 有 上 面 列 出 的 几 种 语言 是 W3C 的 推荐 标准 。 


4. Web 浏览 器 中 的 DOM 支持 


DOM 在 被 Web 浏览 器 开始 实现 之 前 就 已 经 是 一 种 标准 了 。IE 首次 尝试 DOM 是 在 5.0 版 本 
中 ， 不 过 其 实 直 到 5.5 版 本 之 后 才 具 有 真正 的 DOM 支持 ，IE 5.5 实现 了 DOM Level 1。 从 那 
时 起 ，IE 就 没有 引入 新 的 DOM 功能 。 


Netscape 直到 Netscape 6 (Mozilla 0.6.0) 才 引 入 DOM 支持 。 目 前 ，Mozilla 具有 最 好 的 
DOM 支持 ， 实 现 了 完整 的 Level 1、 几乎 所 有 Level 2 以 及 一 部 分 Level 3。 (Mozilla 开发 小 
组 的 目标 是 构造 一 个 与 标准 100% 兼容 的 浏览 器 ， 他 们 的 工作 得 到 了 回报 。 ) 


Opera 直到 7.0 版 本 才 加 入 DOM 支持 ， 还 有 Safari 也 实现 了 大 部 分 DOM Level 1。 它 们 几 
乎 都 与 IE 5.5 处 于 同一 水 平 ， 有 些 情 况 下 ， 其 至 超过 了 IE 5.5。 不 过 ， 就 对 DOM 的 支持 而 
论 ， 所 有 浏览 器 都 远 远 落后 于 Mozilla。 下 表 列 出 了 常用 浏览 器 对 DOM 的 支持 。 


浏览 器 DOM 兼容 性 


Netscape Navigator 1.0 - 4.x - 


Netscape 6.0+ (Mozilla 0.6.0+) Level 1, Level 2, Level 3 (部 分 ) 

IE 2.0 - 4.x E 

IE 5.0 Level 1 (最 小 ) 

IE 5.5+ Level 1 (L228) 

Opera 1.0 - 6.0 - 

Opera 7.0+ Level 1 (L438) . Level 2 (部 分 ) 

Safari 1.0+/Konqueror ~ 2.0+ Level 1 
注释 : 如 果 希 望 进一步 地 学 习 DOM 的 知识 ， 请 访问 W3school BY HTML DOM 教程 和 XML 
DOM 教程 。 
BOM 


IE 3.0 和 Netscape Navigator 3.0 提供 了 一 种 特性 -BOM (浏览 器 对 象 模 型 ) ， 可 以 对 浏览 
器 窗口 进行 访问 和 操作 。 使 用 BOM， 开 发 者 可 以 移动 窗口 、 e a la 
他 与 页 面 内 容 不 直接 相关 的 动作 。 使 BOM 独树一帜 且 又 常常 舍 人 怀疑 的 地 方 在 于 ， 它 只 
JavaScript 的 一 个 部 分 ， 没 有 任何 相关 的 标准 。 


BOM 主要 人 处理 浏览 器 窗口 和 框架 ， 不 过 通常 浏览 器 特定 的 JavaScript 扩展 都 被 看 做 BOM 的 
一 部 分 。 这 些 扩 展 包括 : 


。 弹出 新 的 浏览 器 窗口 

。 移动 、 关 闭 浏览 器 窗口 以 及 调整 窗口 大 小 

。 提供 Web 浏览 器 详细 信息 的 定位 对 象 

。 提供 用 户 屏 幕 分 辩 率 详细 信息 的 屏幕 对 象 

e 对 cookie 的 支持 

e IERT BOM, MAT ActiveXObject 类 ， 可 以 通过 JavaScript 实例 化 Activex 对 象 


由 于 没有 相关 的 BOM 标准 ， 每 种 浏览 器 都 有 自己 的 BOM 实现 。 有 一 些 事实 上 的 标准 ， 如 具 
有 一 个 窗口 对 象 和 一 个 导航 对 象 ， 不 过 每 种 浏览 器 可 以 为 这 些 对 象 或 其 他 对 象 定义 自己 的 属 
性 和 方法 。 


参阅 : 


© Window 对 象 
e Navigator 对 象 
e Screen 对 象 
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e History 对 象 
e Location 对象 
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ECMAScript 基础 


ECMAScript 语法 


熟悉 Java, C 和 Perl 这 些 语言 的 开发 者 会 发 现 ECMAScript 的 语法 很 容易 掌握 ， 因 为 它 借 
用 了 这 些 语言 的 语法 。 


Java 和 ECMAScript 有 一 些 关 键 的 语法 特性 相同 ， 也 有 一 些 完全 不 同 。 


KAAS 


与 Java—#, 28. BAA. «nBRURE—-OABRERDAN)SHM. 
比如 : 


变量 test 与 变量 TEST 是 不 同 的 。 


变量 是 弱 类 型 的 

与 Java 和 C 不 同 ，ECMAScript 中 的 变量 无 特定 的 类 型 ， 定 义 变 量 时 只 用 var 运算 符 ， 可 以 
将 它 初始 化 为 任意 值 。 

因此 ， 可 以 随时 改变 变量 所 存 数据 的 类 型 (尽量 避免 这 样 做) 。 


例子 


var color = "red"; 
var num = 25; 
var visible = true; 


每 行 结尾 的 分 号 可 有 可 无 
Java, C 和 Perl 都 要 求 每 行 代码 以 分 号 (;) 结束 才 符 合 语法 。 


ECMAScript 则 人 允许 开发 者 自行 决定 是 否 以 分 号 结束 一 行 代 码 。 如 果 没 有 分 号 ，ECMAScript 
就 把 折 行 代码 的 结尾 看 做 该 语句 的 结尾 (5 Visual Basic 和 VBScript 相似 ) ， 前 提 是 这 样 没 
有 破坏 代码 的 语义 。 


最 好 的 代码 编写 习惯 是 总 加 入 分 号 ， 因 为 没有 分 号 ， 有 些 浏览 器 就 不 能 正确 运行 ， 不 过 根据 
ECMAScript 标准 ， 下 面 两 行 代码 都 是 正确 的 : 


W red" 
"blue"; 


var testi 
var test2 


注释 与 Java、C 和 PHP 语言 的 注释 相同 


ECMAScript 借用 了 这 文 些 语 wea 襄 的 注释 语 法 8 
有 两 种 类 型 的 注释 : 


。 单行 注释 以 双 和 斜 杠 开头 (//) 
。 多 行 注释 以 单 斜 枉 和 星 号 开头 (/) ， 以 星 号 和 单 斜 杠 结尾 (/) 


//this is a single-line comment 


/*this is a multi- 
line comment*/ 


括号 表示 代码 块 
从 Java 中 借鉴 的 另 一 个 概念 是 代码 块 。 


代码 块 表示 一 系列 应 该 按 顺 序 执行 的 语句 ， 这 些 语句 被 封装 在 左 括号 〈{) 和 右 括号 H 之 
间 。 


例如 : 


if (test1 == "red") { 
testi = "blue"; 
alert(test1); 





ECMAScript = = 


请 使 用 var 运算 符 声 明 变 量 。 


变量 名 需要 遵守 一 些 简单 的 规则 。 


= -性 
声明 变量 
在 上 一 节 中 我 们 讲解 过 ，ECMAScript 中 的 变量 是 用 var 运算 符 (variable 的 缩写 ) 加 变量 名 


定义 的 。 例 如 : 
var test = "hi"; 
在 这 个 例子 中 ， 声 明了 变量 test， 并 把 它 的 值 初始 化 为 "hi" (FFP) . AF ECMAScript 是 
弱 类 型 的 ， 所 以 解释 程序 会 为 test 自动 创建 一 个 字符 串 值 ， 无 需 明 确 的 类 型 声明 。 
还 可 以 用 一 个 var 语句 定义 两 个 或 多 个 变量 : 


var testi = "hi", test2 = "hello"; 


前 面 的 代码 定义 了 变量 test1， 初 始 值 为 "hi"， 还 定义 了 变量 test2， 初 始 值 为 "hello"。 


不 过 用 同一 个 va 语句 定义 的 变量 不 必 具 有 相同 的 类 型 ， 如 下 所 示 : 


var test = "hi", age = 25; 


这 个 例子 除了 (再 次 ) 定义 test 外 ， 还 定义 了 age， 并 把 它 初始 化 为 25。 即 使 test 和 age B 
于 两 种 不 同 的 数据 类 型 ， 在 ECMAScript 中 这 样 定义 也 是 完全 合法 的 。 


与 Java 不 同 ，ECMAScript 中 的 变量 并 不 一 定 要 初始 化 〈 它 们 是 在 幕后 初始 化 的 ， 将 在 后 面 
讨论 这 一 点 ) 。 因 此 ， 下 面 这 一 行 代码 也 是 有 效 的 : 


var test; 


此 外 ， 与 Java 不 同 的 还 有 变量 可 以 存放 不 同类 型 的 值 。 这 是 弱 类 型 变量 的 优势 。 例 如 ， 可 以 
把 变量 初始 化 为 字符 串 类 型 的 值 ， 之 后 把 它 设 置 为 数字 值 ， 如 下 所 示 : 


var test = "hi"; 
alert(test); 
test = 55; 
alert(test); 


这 段 代 码 将 之 无 问题 地 输出 字符 串 值 和 数字 值 。 但 是 ， 如 前 所 述 ， 使 用 变量 时 ， 好 的 编码 习 
惯 是 始终 存放 相同 类 型 的 值 。 


名 变 


变量 名 需要 遵守 两 条 简单 的 规则 : 


3 
Hm 


。 第 一 个 字符 必须 是 字母 、 下 划 线 (_) 或 美元 符号 ($) 
。 余下 的 字符 可 以 是 下 划 线 、 美 元 符号 或 任何 字母 或 数字 字符 


下 面 的 变量 都 是 合法 的 : 


var test; 
var $test; 
var $1; 

var _$te$t2; 


著名 的 变量 命名 规则 


只 是 因为 变量 名 的 语法 正确 ， 并 不 意味 着 就 该 使 用 它们 。 变 量 还 应 遵守 以 下 某 条 著名 的 命名 
规则 : 


Camel 标记 法 


首 字 母 是 小 写 的 ， 接 下 来 的 字母 都 以 大 写字 符 开 头 。 例 如 : 


var myTestValue = 0, mySecondValue = "hi"; 


Pascal 标记 法 
首 字 母 是 大 写 的 ， 接 下 来 的 字母 都 以 大 写字 符 开 头 。 例 如 : 


var MyTestValue = 0, MySecondValue = "hi"; 


匈牙利 类 型 标记 法 


在 以 Pascal 标记 法 命名 的 变量 前 附加 一 个 小 写字 母 (或 小 写字 母 序 列 ) ， 说 明 该 变量 的 类 
型 。 例 如 ，i 表示 整数 ，s 表示 字符 串 ， 如 下 所 示 " 


var iMyTestValue = ©, sMySecondValue = "hi"; 


本 教程 采用 了 这 些 前 级 ， 以 使 示例 代码 更 易 阅 读 : 


类 型 前 级 示例 
数组 a aValues 
布尔 型 b bFound 
浮 点 型 (数字) f fValue 
函数 fn fnMethod 
整 型 (数字 ) i iValue 
对 象 o oType 
正则 表达 式 re rePattern 
字符 串 s sValue 
变型 〈 可 以 是 任何 类 型 ) V vValue 


变量 声明 不 是 必须 的 


ECMAScript 另 一 个 有 趣 的 方面 (也 是 与 大 多 数 程序 设计 语言 的 主要 区 别 ) ， 是 在 使 用 变量 之 
前 不 必 声 明 。 例 如 : 


var sTest = "hello " 
sTest2 = sTest + "world"; 
alert(sTest2); 


在 上 面 的 代码 中 ， 首 先 ，sTest 被 声明 为 字符 串 类 型 的 值 "hello"。 接 下 来 的 一 行 ， 用 变量 
sTest2 把 sTest 与 字符 串 "world" 连 在 一 起 。 变 量 sTest2 并 没有 用 var 运算 符 定 义 ， 这 里 只 
是 插入 了 它 ， 就 像 已 经 声明 过 它 一 样 。 


ECMAScript 的 解释 程序 遇 到 未 声明 过 的 标识 符 时 ， 用 该 变量 名 创建 一 个 全 局 变量 ， 并 将 其 初 
始 化 为 指定 的 值 。 


这 是 该 语言 的 便利 之 处 ， 不 过 如 果 不 能 紧密 跟踪 变量 ， 这 样 做 也 很 危险 。 最 好 的 习惯 是 像 使 
用 其 他 程序 设计 语言 一 样 ， 总 是 声明 所 有 变量 。 


ECMAScript 关键 字 


本 节 提 供 完整 的 ECMAScript 关键 字 列 表 。 


ECMAScript 关键 字 


ECMA-262 定义 了 ECMAScript 支持 的 一 套 关 键 字 (keyword) 。 


这 些 关 键 字 标识 了 ECMAScript 语句 的 开头 和 /或 结尾 。 根 据 规 定 ， 关 键 字 是 保留 的 ， 不 能 用 
作 变 量 名 或 函数 名 。 


File ECMAScript 关键 字 的 完整 列表 : 


break 
Case 
catch 
continue 
default 


function 
if 

in 
instanceof 


意 : WREX FAFI EARRA, PBE ENA "Identifier Expected" (应 该 有 标识 


注 
符 、 期 望 标识 符 ) 这 样 的 错误 消息 。 


ECMAScript 保留 字 


本 节 提 供 完 整 的 ECMAScript 保留 字 列 表 。 


ECMAScript 保留 字 


ECMA-262 定义 了 ECMAScript 支持 的 一 套 保留 字 (reserved word) 。 


保留 字 在 某 种 意思 上 是 为 将 来 的 关键 字 而 保留 的 单词 。 因 此 保留 字 不 能 被 用 作 变 量 名 或 函数 
名 。 


ECMA-262 第 三 版 中 保留 字 的 完整 列表 如 下 : 


abstract 
boolean 
byte 

char 
class 
const 
debugger 
double 
enum 
export 
extends 
final 
float 
goto 
implements 
import 
int 
interface 
long 
native 
package 
private 
protected 
public 
short 
static 
super 
synchronized 
throws 
transient 
volatile 


注意 : 如 果 将 保留 字 用 作 变 量 名 或 函数 名 ， 那 么 除非 将 来 的 浏览 器 实现 了 该 保留 字 ， 否 则 很 
可 能 收 不 到 任何 错误 消息 。 当 浏览 器 将 其 实现 后 ， 该 单词 将 被 看 做 关键 字 ， 如 此 将 出 现 关 键 


字 错 误 。 


ECMAScript 原始 值 和 引用 值 


在 ECMAScript 中 ， 变 量 可 以 存在 两 种 类 型 的 值 ， 即 原始 值 和 引用 值 。 


原始 值 和 引用 值 


在 ECMAScript 中 ， 变 量 可 以 存在 两 种 类 型 的 值 ， 即 原始 值 和 引用 值 。 

原始 值 

存储 在 栈 (stack) 中 的 简单 数据 段 ， 也 就 是 说 ， 它 们 的 值 直接 存储 在 变量 访问 的 位 置 。 
引用 值 

存储 在 堆 (heap) 中 的 对 象 ， 也 就 是 说 ， 存 储 在 变量 处 的 值 是 一 个 指针 (point) ， 指 向 存储 
TRA AF R. 


AZERA, ECMAScript 的 解释 程序 必须 判断 该 值 是 原始 类 型 ， 还 是 引用 类 型 。 要 实现 这 
一 点 ， 解 释 程序 则 需 党 试 判断 该 值 是 否 为 ECMAScript 的 原始 类 型 之 一 ， 即 Undefined, 
Null, Boolean, Number 和 String 型 。 由 于 这 些 原始 类 型 占据 的 空间 是 固定 的 ， 所 以 可 将 他 
们 存储 在 较 小 的 内 存 区 域 - 栈 中 。 这 样 存 储 便于 迅速 查寻 变量 的 值 。 


在 许多 语言 中 ， 字 符 串 都 被 看 作 引 用 类 型 ， 而 非 原始 类 型 ， 因 为 字符 串 的 长 度 是 可 变 的 。 
ECMAScript 打破 了 这 一 传统 。 


如 果 一 个 值 是 引用 类 型 的 ， 那 么 它 的 存储 空间 将 从 堆 中 分 配 。 由 于 引用 值 的 大 小 会 改变 ， 所 
以 不 能 把 它 放 在 栈 中 ， 否 则 会 降低 变量 查寻 的 速度 。 相 反 ， 放 在 变量 的 栈 空 间 中 的 值 是 该 对 
象 存储 在 堆 中 的 地 址 。 地 址 的 大 小 是 固定 的 ， 所 以 把 它 存储 在 栈 中 对 变量 性 能 无 任何 负面 影 
响 。 如 下 图 所 示 : 





数字 【12) 


布尔 值 【true) 


null 


地 址 (oO) 


SHB ("test") 
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原始 类 型 


如 前 所 述 ，ECMAScript 有 5 种 原始 类 型 (primitive type) ， 即 Undefined、Null、Boolean、 
Number 和 String。ECMA-262 把 术语 类 型 (type) 定义 为 值 的 一 个 集合 ， 每 种 原始 类 型 定义 
了 它 包 含 的 值 的 范围 及 其 字面 量 表示 形式 。 

ECMAScript 提供 了 typeof 运算 符 来 判断 一 个 值 是 否 在 某 种 类 型 的 范围 内 。 可 以 用 这 种 运算 
符 判 断 一 个 值 是 否 表示 一 种 原始 类 型 : 如 果 它 是 原始 类 型 ， 还 可 以 判断 它 表 示 哪 种 原始 类 

型 。 

在 稍 后 的 章节 ， 我 们 将 为 您 深入 讲解 ECMAScript 的 原始 类 型 和 引用 类 型 。 


ECMAScript 原始 类 型 


ECMAScript 有 5 种 原始 类 型 (primitive type) ， 即 Undefined、Null、Boolean、 
Number 和 String。 


typeof 运算 符 
typeof 运算 符 有 一 个 参数 ， 即 要 检查 的 专 量 或 值 。 例 如 : 


var STemp = "test string"; 
alert (typeof sTemp); // 输 出 "string" 
alert (typeof 86); // 输 出 "number" 


对 变量 或 值 调用 typeof 运算 符 将 返回 下 列 值 之 一 : 


e undefined - 2058 & Bz Undefined 类 型 的 

e boolean - 如 果 变 量 是 Boolean 类 型 的 

。 number - WRA <= Number 类 型 的 

e string - MRE Se String 类 型 的 

e object - 如 果 变 量 是 一 种 引用 类 型 或 Null 类 型 的 


注释 : 您 也 许 会 问 ， 为 什么 typeof 运算 符 对 于 null 值 会 返回 "Object"。 这 实际 上 是 
JavaScript 最 初 实现 中 的 一 个 错误 ， 然 后 被 ECMAScript 治 用 了 。 现 在 ，null 被 认为 是 对 象 的 
占 位 符 ， 从 而 解释 了 这 一 矛盾 ， 但 从 技术 上 来 说 ， 它 仍然 是 原始 值 。 


Undefined 类 型 


如 前 所 述 ，Undefined 类 型 只 有 一 个 值 ， 即 undefined。 当 声明 的 变量 未 初始 化 时 ， 该 变量 的 
默认 值 是 undefined。 


var oTemp; 


前 面 一 行 代码 声明 变量 oTemp， 没 有 初始 值 。 该 变量 将 被 赋予 值 undefined， 即 undefined 类 
型 的 字面 量 。 可 以 用 下 面 的 代码 段 测试 该 变量 的 值 是 否 等 于 undefined : 


var oTemp; 
alert(oTemp == undefined); 


ERY Ba "true"， 说 明 这 两 个 值 确实 相等 。 还 可 以 用 typeof 运算 符 显示 该 变量 的 值 是 
undefined : 


var oTemp; 
alert(typeof oTemp); //# 4 "undefined" 


提示 : (4 undefined 并 不 同 于 未 定义 的 值 。 但 是 ，typeof 运算 符 并 不 真正 区 分 这 两 种 值 。 考 
虑 下 面 的 代码 : 
var oTemp; 


alert(typeof oTemp); // 输 出 "undefined" 
alert(typeof oTemp2); // 输 出 "undefined" 


前 面 的 代码 对 两 个 变量 输出 的 都 是 "undefined"， 即 使 只 有 变量 oTemp2 从 未 被 声明 过 。 如 果 
对 oTemp2 使 用 除 typeof 之 外 的 其 他 运算 符 的 话 ， 会 引起 错误 ， 因 为 其 他 运算 符 只 能 用 于 已 
声明 的 变量 上 。 


例如 ， 下 面 的 代码 将 引发 错误 : 


var oTemp; 
alert(oTemp2 == undefined); 


当 画 数 无 明确 返回 值 时 ， 返 回 的 也 是 值 "undefined"， 如 下 所 示 : 
function testFunc() { 


alert(testFunc() == undefined); // 输 出 "true" 


Null 类 型 


另 一 种 只 有 一 个 值 的 类 型 是 Null， 它 只 有 一 个 专用 值 null， 即 它 的 字面 量 。 值 undefined 实际 
上 是 从 值 null 派生 来 的 ， 因 此 ECMAScript 把 它们 定义 为 相等 的 。 


alert(null == undefined); // 输 出 "true" 


尽管 这 两 个 值 相等 ， 但 它们 的 含义 不 同 。undefined 是 声明 了 变量 但 未 对 其 初始 化 时 赋予 该 变 
量 的 值 ，null 则 用 于 表示 尚未 存在 的 对 象 (在 讨论 typeof 运算 符 时 ， 简 单 地 介绍 过 这 一 
点 ) 。 如 果 豆 数 或 方法 要 返回 的 是 对 象 ， 那 么 找 不 到 该 对 象 时 ， 返 回 的 通常 是 null。 


Boolean 类 型 


Boolean 类 型 是 ECMAScript 中 最 常用 的 类 型 之 一 。 它 有 两 个 值 true 和 false ( 即 两 个 
Boolean 字面 量 ) 。 


即使 false 不 等 于 0，0 也 可 以 在 必要 时 被 转换 成 false， 这 样 在 Boolean 语句 中 使 用 两 者 都 
是 安全 的 。 


var bFound = true; 
var bLost = false; 


Number 类 型 


ECMA-262 中 定义 的 最 特殊 的 类 型 是 Number 类 型 。 这 种 类 型 既 可 以 表示 32 位 的 整数 ， 还 
可 以 表示 64 位 的 浮 点 数 。 


直接 输入 的 (而 不 是 从 另 一 个 变量 访问 的 ) 任何 数字 都 被 看 做 Number 类 型 的 字面 量 。 例 
如 ， 下 面 的 代码 声明 了 存放 整数 值 的 变量 ， 它 的 值 由 字面 量 86 定义 : 


var INum = 86; 


八进制 数 和 十 六 进 制 数 


整数 也 可 以 被 表示 为 八进制 (以 8 为 底 ) 或 十 六 进 制 ( 以 16 为 底 ) 的 字面 量 。 八 进 制 字 面 量 
的 首 数字 必须 是 0， 其 后 的 数字 可 以 是 任何 八进制 数字 (0-7) ， 如 下 面 的 代码 所 示 : 


var iNum = 070; //070 等 于 十 进 制 的 56 


要 创建 十 六 进 制 的 字面 量 ， 首 位 数字 必须 为 0， 后 面 接 字母 x， 然 后 是 任意 的 十 六 进 制 数字 
(0 到 9 和 A 到 F) 。 这 些 字母 可 以 是 大 写 的 ， 也 可 以 是 小 写 的 。 例 如 : 


var iNum = 0x1f; //Oxif 等 于 十 进 制 的 31 
var iNum = 0xAB; //0xAB 等 于 十 进 制 的 171 


提示 : 尽管 所 有 整数 都 可 以 表示 为 八进制 或 十 六 进 制 的 字面 量 ， 但 所 有 数学 运算 返回 的 都 是 
十 进 制 结果 。 


浮 点 数 


要 定义 浮 点 值 ， 必 须 包括 小 数 点 和 小 数 点 后 的 一 位 数字 〈 例 如 ， 用 1.0 而 不 是 1) 。 这 被 看 作 
浮 点 数字 面 量 。 例 如 : 


var fNum = 5.0; 


对 于 浮 点 字面 量 的 有 趣 之 处 在 于 ， 用 它 进行 计算 前 ， 真 正 存 储 的 是 字符 串 。 


科学 计数 法 


对 于 非常 大 或 非常 小 的 数 ， 可 以 用 科学 计数 法 表示 浮 点 数 ， 可 以 把 一 个 数 表示 为 数字 (包括 
十 进 制 数字 ) Me (或 E) ， 后 面 加 乘 以 10 的 倍数 。 例 如 : 


var fNum = 5.618e7 


该 符号 表示 的 是 数 56180000。 把 科学 计数 法 转化 成 计算 式 就 可 以 得 到 该 值 : 5.618 x 
10<sup>7</sup>。 


也 可 以 用 科学 计数 法 表示 非常 小 的 数 ， 例 如 0.00000000000000008 可 以 表示 为 8- 
e<sup>17</sup> (这 里 ，10 被 升 到 -17 RS, BRA ER 10 除 17 次 ) 。ECMAScript 
默认 把 具有 6 个 或 6 个 以 上 前 导 0 的 浮 点 数 转换 成 科学 计数 法 。 


提示 : 也 可 用 64 位 IEEE 754 形式 存储 浮 点 值 ， 这 意味 着 十 进 制 值 最 多 可 以 有 17 个 十 进 制 
位 。17 位 之 后 的 值 将 被 裁 去 ， 从 而 造成 一 些小 的 数学 误差 。 


特殊 的 Number 值 


几 个 特殊 值 也 被 定义 为 Number 类 型 。 前 两 个 是 Number.MAX_VALUE 和 
Number.MIN_VALUE， 它 们 定义 了 Number 值 集合 的 外 边界 。 所 有 ECMAScript 数 都 必须 在 
这 两 个 值 之 间 。 不 过 计算 生成 的 数值 结果 可 以 不 落 在 这 两 个 值 之 间 。 


当 计 算 生成 的 数 大 于 Number.MAX_VALUE 时 ， 它 将 被 赋予 值 
NumberPOSITIVE_INFINITY， 意 味 着 不 再 有 数字 值 。 同 样 ， 生 成 的 数值 小 于 
Number.MIN_ VALUE 的 计算 也 会 被 赋予 值 NumberNEGATIVE_INFINITY， 也 意味 着 不 再 有 
数字 值 。 如 果 计 算 返 回 的 是 无 穷 大 值 ， 那 么 生成 的 结果 不 能 再 用 于 其 他 计算 。 


事实 上 ， 有 专门 的 值 表 示 无 穷 大 ，〈 如 你 猜 到 的 ) BN Infinity。NumberPOSITIVE_INFINITY 
的 值 为 Infinity。NumberNEGATIVE_INFINITY 的 值 为 -Infinity。 

由 于 无 穷 大 数 可 以 是 正 数 也 可 以 是 负数 ， 所 以 可 用 一 个 方法 判断 一 个 数 是 否 是 有 穷 的 (而 不 
是 单独 测试 每 个 无 穷 数 ) 。 可 以 对 任何 数 调 用 isFinite() 方法 ， 以 确保 该 数 不 是 无 穷 大 。 例 
如 : 


var iResult = iNum * some_really_large_number; 





“if (isFinite(iResult))> { 
alert("finite"); 
} 


else { 
alert("infinite"); 


最 后 一 个 特殊 值 是 NaN， 表 示 非 数 (Nota Number) > NaN 是 个 奇怪 的 特殊 值 。 一 般 说 来 ， 
这 种 情况 发 生 在 类 型 (String, Boolean 等 ) 转换 失败 时 。 例 如 ， 要 把 单词 blue 转换 成 数值 
就 会 失败 ， 因 为 没有 与 之 等 价 的 数值 。 与 无 穷 大 一 样 ，NaN 也 不 能 用 于 算术 计算 。NaN 的 另 
一 个 奇特 之 处 在 于 ， 它 与 自身 不 相等 ， 这 意味 着 下 面 的 代码 将 返回 false : 


alert(NaN == NaN); // 输 出 "false" 


出 于 这 个 原因 ， 不 推荐 使 用 NaN (AS, BR isNaN() 会 做 得 相当 好 : 


alert(isNaN("blue")); // 输 出 "true" 
alert(isNaN("666")); // 输 出 "false" 


String 类 型 


String 类 型 的 独特 之 处 在 于 ， 它 是 唯一 没有 固定 大 小 的 原始 类 型 。 可 以 用 字符 串 存储 0 或 更 
多 的 Unicode 字符 ， 有 16 位 整数 表示 (Unicode 是 一 种 国际 字符 集 ， 本 教程 后 面 将 讨论 
它 ) o 


字符 串 中 每 个 字符 都 有 特定 的 位 置 ， 首 字符 从 位 置 0 开始 ， 第 二 个 字符 在 位 置 1， 依 此 类 
推 。 这 意味 着 字符 串 中 的 最 后 一 个 字符 的 位 置 一 定 是 字符 串 的 长 度 减 1 : 
这 个 宇和 罕 审 的 长 度 是 6 


seo 
0 1 2 3 4 5 


字符 串 字 面 量 是 由 双 引 号 (") 或 单 引 号 () 声明 的 。 而 Java 则 是 用 双 引 号 声明 字符 串 ， 用 
单 引 号 声明 字符 。 但 是 由 于 ECMAScript 没有 字符 类 型 ， 所 以 可 使 用 这 两 种 表示 法 中 的 任何 
一 种 。 例 如 ， 下 面 的 两 行 代码 都 有 效 : 


var sColori = "red"; 
var sColor2 = 'red'; 


String 类 型 还 包括 几 种 字符 字面 量 ，Java、C 和 Per 的 开发 者 应 该 对 此 非常 熟悉 。 


下 面 列 出 了 ECMAScript 的 字符 字面 量 : 


\Onnn 


\xnn 


\unnnn 


换行 

制 表 符 

空格 

回 车 

换 页 符 

反 斜 杠 

单 引号 

双 引 号 

八进制 代码 nnn 表示 的 字符 (n 是 0 到 7 中 的 一 个 八进制 数字 ) 

十 六 进 制 代码 nn 表示 的 字符 (n 是 0 到 F 中 的 一 个 十 六 进 制 数字 ) 
六 进 制 代码 nnnn 表示 的 Unicode 字符 (n 是 0 到 F 中 的 一 个 十 六 进 制 数 


ECMAScript 类 型 转换 


所 有 程序 设计 语言 最 重要 的 特征 之 一 是 具有 进行 类 型 转换 的 能 
ECMAScript 给 开发 者 提供 了 大 量 简单 的 类 型 转换 方法 。 


大 部 分 类 型 具有 进行 简单 转换 的 方法 ， 还 有 几 个 全 局 方法 可 以 用 于 更 复杂 的 转换 。 无 论 哪 种 
情况 ， 在 ECMAScript 中 ， 类 型 转换 都 是 简短 的 一 步 操作 。 


转换 成 字符 串 


ECMAScript 的 Boolean 值 、 数 字 和 字符 串 的 原始 值 的 有 趣 之 处 在 于 它们 是 伪 对 象 ， 这 意味 
着 它们 实际 上 具有 属性 和 方法 。 


例如 ， 要 获得 字符 串 的 长 度 ， 可 以 采用 下 面 的 代码 : 


var sColor = "red"; 
alert(sColor.length); // 输 出 "3" 


RE "red" 是 原始 类 型 的 字符 串 ， 它 仍然 具有 属性 length， 用 于 存放 字符 串 的 大 小 。 


总 而 言 之 ，3 种 主要 的 原始 类 型 Boolean 值 、 数 字 和 字符 串 都 有 toString) 方法 ， 可 以 把 它们 
的 值 转换 成 字符 串 。 


提示 : 您 也 许 会 问 , “字符 串 还 有 toString() 方法 吗 ， 这 不 是 多 余 吗 ? "是 的 ， 的 确 如 此 ， 不 过 
ECMAScript 定义 所 有 对 象 都 有 toString) 方法 ， 无 论 它 是 伪 对 象 ， 还 是 真 对 象 。 因 为 String 
类 型 属于 伪 对 象 ， 所 以 它 一 定 有 toString() 方法 。 


Boolean 类 型 的 toString() 方法 只 是 输出 "true" 或 "false"， 结 果 由 变量 的 值 决 定 : 


var bFound = false; 
alert(bFound.toString()); // 输 出 "false" 


Number 类 型 的 toString) 方法 比较 特殊 ， 它 有 两 种 模式 ， 即 默认 模式 和 基 模 式 。 采 用 默认 模 
式 ，toString() 方法 只 是 用 相应 的 字符 串 输 出 数字 值 〈 无 论 是 整数 、 浮 点 数 还 是 科学 计数 
法 ) ， 如 下 所 示 : 


var iNumi = 10; 

var iNum2 = 10.0; 
alert(iNum1.toString()); // 输 出 "10" 
alert(iNum2.toString()); // 输 出 "10" 


注释 : 在 默认 模式 中 ， 无 论 最 初 采 用 什么 表示 法 声明 数字 ，Number 类 型 的 toString() 方法 返 
回 的 都 是 数字 的 十 进 制 表示 。 因 此 ， 以 八进制 或 十 六 进 制 字 面 量 形式 声明 的 数字 输出 的 都 是 
十 进 制 形式 的 。 


采用 Number 类 型 的 toString) 方法 的 基 模 式 ， 可 以 用 不 同 的 基 输 出 数字 ， 例 如 二 进 制 的 基 是 
2， 八 进 制 的 基 是 8， 十 六 进 制 的 基 是 16。 


基 只 是 要 转换 成 的 基数 的 另 一 种 加 法 而 已 ， 它 是 toString() 方法 的 参数 : 


var INum = 10; 


alert(iNum.toString(2)); // 输 出 "1010" 
alert(iNum.toString(8)); // 输 出 "12" 
alert(iNum.toString(16)); // 输 出 "A" 


在 前 面 的 示例 中 ， 以 3 种 不 同 的 形式 输出 了 数字 10， 即 二 进 制 形式 、 八 进 制 形 式 和 十 六 进 制 
形式 。HTML 采用 十 六 进 制 表示 每 种 颜色 ， 在 HTML 中 处 理 数字 时 这 种 功能 非常 有 用 。 


注释 : 对 数字 调用 toString(10) 与 调用 toString) 相同 ， 它 们 返回 的 都 是 该 数字 的 十 进 制 形 
式 。 

参阅 : 

请 参阅 JavaScript 参考 手册 提供 的 有 关 toString() 方法 的 详细 信息 : 


e arrayObject.toString() 

e booleanObject.toString() 
e dateObject.toString() 

e NumberObject.toString() 
e stringObject.toString() 


转换 成 数字 


ECMAScript 提供 了 两 种 把 非 数字 的 原始 值 转换 成 数字 的 方法 ， 即 parselnt() 和 
parseFloat()。 


正如 您 可 能 想到 的 ， 前 者 把 值 转换 成 整数 ， 后 者 把 值 转换 成 浮 点 数 。 只 有 对 String 类 型 调用 
这 些 方法 ， 它 们 才能 正确 运行 ; 对 其 他 类 型 返回 的 都 是 NaN. 


parselnt() 
在 判断 字符 串 是 否 是 数字 值 前 ，parselnt() 和 parseFloat() 都 会 仔细 分 析 该 字符 串 。 


parselnt() 方法 首先 查看 位 置 0 处 的 字符 ， 判 断 它 是 否 是 个 有 效 数 字 ; 如 果 不 是 ， 该 方法 将 返 
回 NaN， 不 再 继续 执行 其 他 操作 。 但 如 果 该 字符 是 有 效 数 字 ， 该 方法 将 查看 位 置 1 ROS 
符 ， 进 行 同 样 的 测试 。 这 一 过 程 将 持续 到 发 现 非 有 效 数 字 的 字符 为 止 ， 此 时 parselnt() 将 把 该 


字符 之 前 的 字符 串 转 换 成 数字 。 


例如 ， 如 果 要 把 字符 串 "12345red" 转换 成 整数 ， 那 么 parselnt() 将 返回 12345， 因 为 当 它 检 
查 到 字符 r 时 ， 就 会 停止 检测 过 程 。 


字符 串 中 包含 的 数字 字面 量 会 被 正确 转换 为 数字 ， 比 如 "0xA" 会 被 正确 转换 为 数字 10。 不 
过 ， 字 符 串 "22.5" 将 被 转换 成 22， 因 为 对 于 整数 来 涪 ， 小 数 点 是 无 效 字符 。 


一 些 示例 如 下 : 
var iNum1 = parseInt("12345red"); // 返 回 12345 
var iNum1 = parseInt("QxA"); // 返 回 10 
var iNum1 = parseInt("56.9"); // 返 回 56 
var iNum1 = parseInt("red"); // 返 回 NaN 


parselnt() 方法 还 有 基 模 式 ， 可 以 把 二 进 制 、 八 进 制 、 十 六 进 制 或 其 他 任何 进 制 的 字符 串 转 换 
成 整数 。 基 是 由 parselnt() 方法 的 第 二 个 参数 指定 的 ， 所 以 要 解析 十 六 进 制 的 值 ， 需 如 下 调用 
parselnt() 方法 : 


var iNum1 = parseInt("AF", 16); // 返 回 175 


当然 ， 对 二 进 制 、 八 进 制 甚至 十 进 制 (默认 模式 ) ， 都 可 以 这 样 调用 parselnt() 方法 : 


var iNum1 = parseInt("10", 2); // 返 回 2 
var iNum2 = parseInt("10", 8); // 返 回 8 
var iNum3 = parseInt("10", 10); // 返 回 10 


如 果 十 进 制 数 包 含 前 导 0， 那 么 最 好 采用 基数 10， 这 样 才 不 会 意外 地 得 到 八进制 的 值 。 例 
如 : 


var iNum1 = parseInt("010"); // 返 回 8 
var iNum2 = parseInt("010", 8); // 返 回 8 
var iNum3 = parseInt("010", 10); // 返 回 10 


在 这 段 代 码 中 ， 两 行 代码 都 把 字符 "010" 解析 成 一 个 数字 。 第 一 行 代码 把 这 个 字符 串 看 作 八 进 
制 的 值 ， 解 析 它 的 方式 与 第 二 行 代码 (声明 基数 为 8) 相同 。 最 后 一 行 代 码 声 明基 数 为 10, 
所 以 iNum3 最 后 等 于 10。 


参阅 
请 参阅 JavaScript 参考 手册 提供 的 有 关 parselnt() 方法 的 详细 信息 : parselnt()。 
parseFloat() 


parseFloat() 方法 与 parselnt() 方法 的 处 理 方式 相似 ， 从 位 置 0 开始 查看 每 个 字符 ， 直 到 找到 
第 一 个 非 有 效 的 字符 为 止 ， 然 后 把 该 字符 之 前 的 字符 串 转 换 成 整数 。 


不 过 ， 对 于 这 个 方法 来 说 ， 第 一 个 出 现 的 小 数 点 是 有 效 字 符 。 如 果 有 两 个 小 数 点 ， 第 二 个 小 
数 点 将 被 看 作 无 效 的 。parseFloat() 会 把 这 个 小 数 点 之 前 的 字符 转换 成 数字 。 这 意味 着 字符 串 
"11.22.33" 将 被 解析 成 11.22。 


使 用 parseFloat() 方法 的 另 一 不 同 之 处 在 于 ， 字 符 串 必须 以 十 进 制 形式 表示 浮 点 数 ， 而 不 是 
用 八进制 或 十 六 进 制 。 该 方法 会 忽略 前 导 0， 所 以 八进制 数 0102 将 被 解析 为 102。 对 于 十 六 
进 制 数 0xXA， 该 方法 将 返回 NaN， 因 为 在 浮 点 数 中 ，x 不 是 有 效 字 符 。 (注释 : 经 测试 ， 具 
体 的 浏览 器 实现 会 返回 0， 而 不 是 NaN。) 


此 外 ，parseFloat() 方法 也 没有 基 模 式 。 
下 面 是 使 用 parseFloat() 方法 的 一 些 示 例 : 


var fNum1 = parseFloat("12345red"); // 返 回 12345 
var fNum2 = parseFLoat("0xA" ) ; // 返 回 NaN 
var fNum3 = parseFloat("11.2"); // 返 回 11.2 
var fNum4 = parseFloat("11.22.33"); // 返 回 11.22 
var fNum5 = parseFloat("0102"); // 返 回 102 
var fNum1 = parseFloat("red"); // 返 回 NaN 

参阅 


请 参阅 JavaScript 参考 手册 提供 的 有 关 parseFloat() 方法 的 详细 信息 : parseFloat()。 


强制 类 型 转换 

您 还 可 以 使 用 强制 类 型 转换 (type casting) 来 处 理 转换 值 的 类 型 。 使 用 强制 类 型 转换 可 以 访 
问 特定 的 值 ， 即 使 它 是 另 一 种 类 型 的 。 

编者 注 : cast 有 ”铸造 "之 意 ， 很 贴 合 “强制 转换 "的 意思 。 

ECMAScript 中 可 用 的 3 种 强制 类 型 转换 如 下 : 


e Boolean(value) - 把 给 定 的 值 转换 成 Boolean 型 ; 
e Number(value) - 把 给 定 的 值 转换 成 数字 (可 以 是 整数 或 浮 点 数 ) ; 
。 String(value) - 把 给 定 的 值 转换 成 字符 串 ; 


用 这 三 个 画 数 之 一 转换 值 ， 将 创建 一 个 新 值 ， 存 放 由 原始 值 直接 转换 成 的 值 。 这 会 造成 意 想 
不 到 的 后 果 。 


Boolean() 2X 


当 要 转换 的 值 是 至 少 有 一 个 字符 的 字符 串 、 非 0 数字 或 对 象 时 ，Boolean() KÄORE true. 
如 果 该 值 是 空 字符 串 、 数 字 0、undefined 或 null， 它 将 返回 false. 


可 以 用 下 面 的 代码 测试 Boolean 型 的 强制 类 型 转换 : 


var b1 = Boolean(""); //false - 空 字符 串 

var b2 = Boolean("hello"); //true - 非 空 字符 串 
var b1 = Boolean(50); //true - 非 需 数字 

var b1 = Boolean(null); //false - null 

var bi = Boolean(0); //false - = 

var b1 = Boolean(new object()); //true - 对 象 


Number() 2% 


Number() 画 数 的 强制 类 型 转换 与 parselnt() 和 parseFloat() 方法 的 义理 方式 相似 ， 只 是 它 转 
换 的 是 整个 值 ， 而 不 是 部 分 值 。 


还 记得 吗 ，parselnt() 和 parseFloat() 方法 只 转换 第 一 个 无 效 字 符 之 前 的 字符 串 ， 因 此 "1.2.3" 
将 分 别 被 转换 为 "1" 和 "1.2"。 


用 Number() 进行 强制 类 型 转换 ，"1.2.3" 将 返回 NaN， 因 为 整个 字符 串 值 不 能 转换 成 数字 。 
如 果 字 符 串 值 能 被 完整 地 转换 ，Number() 将 判断 是 调用 parselnt() 方法 还 是 parseFloat() A 
法 。 


下 表 说 明了 对 不 同 的 值 调 用 Number) 方法 会 发 生 的 情况 : 


用 法 结果 

Number(false) 0 
Number(true) 1 
Number(undefined) NaN 
Number(null) 0 
Number("1.2") 1.2 
Number("12") 12 
Number("1.2.3") NaN 
Number(new object()) NaN 
Number(50) 50 


String() HX 
最 后 一 种 强制 类型 转换 方法 String) 是 最 简单 的 ， 因 为 它 可 把 任何 值 转换 成 字符 串 。 


要 执行 这 种 强制 类 型 转换 ， 只 需要 调用 作为 参数 传递 进来 的 值 的 toString() 方法 ， 即 把 12 转 
换 成 "12"， 把 true 转换 成 "true", 把 false 转换 成 "false", 以 此 类 推 。 


强制 转换 成 字符 串 和 调用 toString() 方法 的 唯一 不 同 之 处 在 于 ， 对 null 和 undefined 值 强制 类 
型 转换 可 以 生成 字符 串 而 不 引发 错误 : 


var s1 = String(null); //"null" 
var oNull = null; 
var s2 = oNull.toString(); // 会 引发 错误 


在 处 理 ECMAScript 这 样 的 弱 类 型 语言 时 ， 强 制 类 型 转换 非常 有 用 ， 不 过 应 该 确保 使 用 值 的 正 
1. 


ECMAScript 引用 类 型 


引用 类 型 通常 叫做 类 (class) 。 


本 教程 会 讨论 大 量 的 ECMAScript 预定 义 引 用 类 型 。 


引用 类 型 

引用 类 型 通常 叫做 类 (class) ， 也 就 是 说 ， 遇 到 引用 值 ， 所 人 处理 的 就 是 对 象 。 
本 教程 会 讨论 大 量 的 ECMAScript 预定 义 引 用 类 型 。 

从 现在 起 ， 将 重点 讨论 与 已 经 讨论 过 的 原始 类 型 紧密 相关 的 引用 类 型 。 


注意 : 从 传统 意义 上 来 说 ，ECMAScript 并 不 真正 具有 类 。 事 实 上 ， 除 了 说 明 不 存在 类 ， 在 
ECMA-262 中 根本 没有 出 现 “ 类 ”这 个 词 。ECMAScript 定义 了 "对象 定义 "， 退 辑 上 等 价 于 其 他 
程序 设计 语言 中 的 类 。 


提示 : 本 教程 季 使 用 术语 “对 象 "”。 


对 象 是 由 new 运算 符 加 上 要 实例 化 的 对 象 的 名 字 创 建 的 。 例 如 ， 下 面 的 代码 创建 Object 对 象 
的 实例 : 


var 0 = new Object(); 


这 种 语法 与 Java 语言 的 相似 ， 不 过 当 有 不 止 一 个 参数 时 ，ECMAScript 要 求 使 用 括号 。 如 果 
没有 参数 ， 如 以 下 代码 所 示 ， 括 号 可 以 省 略 : 


var 0 = new Object; 


注意 : 尽管 括号 不 是 必需 的 ， 但 是 为 了 避免 混乱 ， 最 好 使 用 括号 。 
提示 : 我 们 会 在 对 象 基础 这 一 章 中 更 深入 地 探讨 对 象 及 其 行为 。 
这 一 节 的 重点 是 具有 等 价 的 原始 类 型 的 引用 类 型 。 


Object 对 象 


Object 对 象 自身 用 处 不 大 ， 不 过 在 了 解 其 他 类 之 前 ， 还 是 应 该 了 解 它 。 因 为 ECMAScript 中 
的 Object 对 象 与 Java 中 的 java.lang.Object 相似 ，ECMAScript 中 的 所 有 对 象 都 由 这 个 对 象 
继承 而 来 ，Object 对 象 中 的 所 有 属性 和 方法 都 会 出 现在 其 他 对 象 中 ， 所 以 理解 了 Object 对 
象 ， 就 可 以 更 好 地 理解 其 他 对 象 。 


Object 对 象 具有 下 列 属 性 : 


Constructor 
对 创建 对 象 的 函数 的 引用 (指针 ) 。 对 于 Object 对 象 ， 该 指针 指向 原始 的 Object() HFK. 
Prototype 


对 该 对 象 的 对 象 原 型 的 引用 。 对 于 所 有 的 对 象 ， 它 默认 返回 Object 对 象 的 一 个 实例 。 


Object 对 象 还 具有 几 个 方法 : 
hasOwnProperty(property) 
判断 对 象 是 否 有 某 个 特定 的 属性 。 必 须 用 字符 串 指定 该 属性 。 (例如 ， 


o.hasOwnProperty("name")) 
IsPrototypeOf(object) 

判断 该 对 象 是 否 为 另 一 个 对 象 的 原型 。 
PropertylsEnumerable 

判断 给 定 的 属性 是 否 可 以 用 for...in 语句 进行 枚 举 。 
ToString() 


返回 对 象 的 原始 字符 串 表示 。 对 于 Object t+, ECMA-262 没有 定义 这 个 值 ， 所 以 不 同 的 
ECMAScript 实现 具有 不 同 的 值 。 


ValueOf() 
返回 最 适合 该 对 象 的 原始 值 。 对 于 许多 对 象 ， 该 方法 返回 的 值 都 与 ToString() 的 返回 值 相同 。 
注释 : 上 面 列 出 的 每 种 属性 和 方法 都 会 被 其 他 对 象 履 盖 。 


Boolean 对 象 


Boolean 对 象 是 Boolean 原始 类 型 的 引用 类 型 。 


要 创建 Boolean 对 象 ， 只 需要 传递 Boolean 值 作为 参数 : 


var oBooleanObject = new Boolean(true); 


Boolean 对 象 将 覆盖 Object 对 象 的 ValueOf() 方法 ， 返 回 原始 值 ， 即 true 和 false, 
ToString() 方法 也 会 被 覆盖 ， 返 回 字 符 串 "true" 或 "false", 


遗憾 的 是 ， 在 ECMAScript 中 很 少 使 用 Boolean 对 象 ， 即 使 使 用 ， 也 不 易 理解 。 
问题 通常 出 现在 Boolean 表达 式 中 使 用 Boolean 对 象 时 。 例 如 : 


var oFalseObject = new Boolean(false); 
var bResult = oFalseObject && true; // 输 出 true 


在 这 段 代 码 中 ， 用 false 值 创 建 Boolean 对 象 。 然 后 用 这 个 值 与 原始 值 true 进行 AND 操作 。 
在 Boolean 运算 中 ，false 和 true 进行 AND 操作 的 结果 是 false。 不 过 ， 在 这 行 代 码 中 ， 计 
算 的 是 oFalseObject， 而 不 是 它 的 值 false。 


正如 前 面 讨 论 过 的 ， 在 Boolean 表达 式 中 ， 所 有 对 象 都 会 被 自动 转换 为 true, PEA 
oFalseObject 的 值 是 true, AA true 再 与 true 进行 AND 操作 ， 结 果 为 true。 


注意 : 虽然 你 应 该 了 解 Boolean 对 象 的 可 用 性 ， 不 过 最 好 还 是 使 用 Boolean 原始 值 ， 避 免 发 
生 这 一 节 提 到 的 问题 。 


参阅 


N 


如 需 更 多 有 关 Boolean 对 象 的 信息 ， 请 访问 JavaScript Boolean 对 象 参考 手册 。 


Number 对 象 


正如 你 可 能 想到 的 ，Number 对 象 是 Number 原始 类 型 的 引用 类 型 。 要 创建 Number 对 象 ， 
采用 下 列 代码 : 


var oNumberObject = new Number(68); 


您 应 该 已 认 出 本 章 前 面 小 节 中 讨论 特殊 值 (如 Number.MAX_VALUE) 时 提 到 的 Number 对 
象 。 所 有 特殊 值 都 是 Number 对 象 的 静态 属性 。 


要 得 到 数字 对 象 的 Number 原始 值 ， 只 需要 使 用 valueOf() 方法 : 


var iNumber = oNumberObject.valueOf(); 


449%, Number 类 也 有 toString) 方法 ， 在 讨论 类 型 转换 的 小 节 中 已 经 详细 讨论 过 该 方法 。 
除了 从 Object 对 象 继 承 的 标准 方法 外 ，Number 对 象 还 有 几 个 处 理 数值 的 专用 方法 。 


toFixed() 方法 
toFixed() 方法 返回 的 是 具有 指定 位 数 小 数 的 数字 的 字符 串 表 示 。 例 如 : 


var oNumberObject = new Number(68 ) ; 
alert(oNumberObject.toFixed(2)); // 输 出 "68.00" 


在 这 里 ，toFixed() 方法 的 参数 是 2， 说 明 应 该 显示 两 位 小 数 。 该 方法 返回 "68.00"， 空 的 字符 
串 位 由 0 来 补充 。 对 于 义理 货币 的 应 用 程序 ， 该 方法 非常 有 用 。toFixed() 方法 能 表示 具有 0 
到 20 位 小 数 的 数字 ， 超 过 这 个 范围 的 值 会 引发 错误 。 

toExponential() 方法 


与 格式 化 数字 相关 的 另 一 个 方法 是 toExponential()， 它 返回 的 是 用 科学 计数 法 表示 的 数字 的 
字符 串 形式 。 


与 toFixed() 方法 相似 ，toExponential() 方法 也 有 一 个 参数 ， 指 定 要 输出 的 小 数 的 位 数 。 例 
如 : 


var oNumberObject = new Number(68); 
alert(oNumberObject.toExponential(1)); //# Hi "6.8e+1" 


这 段 代 码 的 结果 是 "6.8e+1"， 前 面 解释 过 ， 它 表示 6.8x10<sup>1</sup>, 问题 是 ， 如 果 不 知 
道 要 用 哪 种 形式 (预定 形式 或 指数 形式 ) 表示 数字 怎么 办 ? 可 以 用 toPrecision() 方法 。 


toPrecision() 方法 


toPrecision() 方法 根据 最 有 意义 的 形式 来 返回 数字 的 预定 形式 或 指数 形式 。 它 有 一 个 参数 ， 即 
用 于 表示 数 的 数字 总 数 (不 包括 指数 ) 。 例 如 ， 


var oNumberObject = new Number(68); 
alert(oNumberObject.toPrecision(1)); // 输 出 "7e+1" 


这 段 代 码 的 任务 是 用 一 位 数字 表示 数字 68， 结 果 为 "7e+1"， 以 另外 的 形式 表示 即 70。 的 
确 ，toPrecision() 方法 会 对 数 进行 舍 人 。 不 过 ， 如 果 用 2 位 数字 表示 68， 就 容易 多 了 : 


var oNumberObject = new Number(68); 
alert(oNumberObject.toPrecision(2)); // 输 出 "68" 


当然 ， 输 出 的 是 "68"， 因 为 这 正 是 该 数 的 准确 表示 。 不 过 ， 如 果 指 定 的 位 数 多 于 需要 的 位 数 
又 如 何 呢 ? 


var oNumberObject = new Number(68); 
alert(oNumberObject.toPrecision(3)); // 输 出 "68.0" 


在 这 种 情况 下 ，toPrecision(3) 等 价 于 toFixed(1)， 输 出 的 是 "68.0"。 


toFixed(), toExponential() 和 toPrecision() 方法 都 会 进行 舍 人 操作 ， 以 便 用 正确 的 小 数位 数 
正确 地 表示 一 个 数 。 


提示 : 与 Boolean 对 象 相 似 ，Number 对 象 也 很 重要 ， 不 过 应 该 少 用 这 种 对 象 ， 以 避免 潜在 
的 问题 。 只 要 可 能 ， 都 使 用 数字 的 原始 表示 法 。 


参阅 


如 需 更 多 有 关 Number 对 象 的 信息 ， 请 访问 JavaScript Number 对 象 参考 手册 。 


String 对 象 
String 对 象 是 String 原始 类 型 的 对 象 表示 法 ， 它 是 以 下 方式 创建 的 : 


var oStringObject = new String("hello world"); 


String 对 象 的 valueOf() 方法 和 toString() 方法 都 会 返回 String 类 型 的 原始 值 


alert(oStringObject.valueOf() == oStringObject.toString()); // 输 出 "true" 


如 果 运 行 这 段 代 码 ， 输 出 是 "true"， 说 明 这 些 值 真 的 相等 。 


注释 : String 对 象 是 ECMAScript 中 比较 复杂 的 引用 类 型 之 一 。 同 样 ， 本 节 的 重点 只 是 String 
类 的 基本 功能 。 更 多 的 高 级 功能 请 阅读 本 教程 相关 的 章节 ， 或 参阅 JavaScript String 对 象 参 
考 手册 。 


length 属性 
String 对 象 具有 属性 length， 它 是 字符 串 中 的 字符 个 数 : 


var oStringObject = new String("hello world"); 
alert(oStringObject.length); // 输 出 "11" 


这 个 例子 输出 的 是 "11", BP "hello world" 中 的 字符 个 数 。 注 意 ， 即 使 字符 串 包 含 双 字 节 的 字 
F (5 ASCI 字符 相对 ，ASCII 字符 只 占用 一 个 字 节 ) ， 每 个 字符 也 只 算 一 个 字符 。 
charAt() 和 charCodeAt() 方法 


String 对 象 还 拥有 大 量 的 方法 。 


首先 ， 两 个 方法 charAt() 和 charCodeAt() 访问 的 是 字符 串 中 的 单个 字符 。 这 两 个 方法 都 有 一 
个 参数 ， 即 要 操作 的 字符 的 位 置 。 


charAt() 方法 返回 的 是 包含 指定 位 置 处 的 字符 的 字符 串 : 


var oStringObject = new String("hello world"); 
alert(oStringObject.charAt(1)); // 输 出 "e" 


在 字符 串 "hello world" 中 ， 位 置 1 处 的 字符 是 "e"。 在 “ECMAScript 原始 类 型 "这 一 节 中 我 们 
讲 过 ， 第 一 个 字符 的 位 置 是 0， 第 二 个 字符 的 位 置 是 1， 依 此 类 推 。 因 此 ， 调 用 charAt(1) 返 
回 的 是 "e", 


如 果 想 得 到 的 不 是 字符 ， 而 是 字符 代码 ， 那 么 可 以 调用 charCodeAt() 方法 : 


var oStringObject = new String("hello world"); 
alert (oStringObject .charCodeAt(1)); // 输 出 "101" 


这 个 例子 输出 "101"， 即 小 写字 母 "e" 的 字符 代码 。 


concat() 方法 


接 下 来 是 concat() 方法 ， 用 于 把 一 个 或 多 个 字符 串 连 接 到 String 对 象 的 原始 值 上 。 该 方法 返 
回 的 是 String 原始 值 ， 保 持原 始 的 String 对 象 不 变 : 


var oStringObject = new String("hello "); 
var sResult = oStringObject.concat("world"); 
alert(sResult); // 输 出 “hello world" 
alert(oStringObject); // 输 出 "hello " 


在 上 面 这 段 代 码 中 ， 调 用 concat() 方法 返回 的 是 "hello world", m String 对 象 存 放 的 仍然 是 
"hello "。 出 于 这 种 原因 ， 较 常见 的 是 用 加 号 +) 连接 字符 串 ， 因 为 这 种 形式 从 逮 辑 上 表明 了 
真正 的 行为 : 


var oStringObject = new String("hello "); 
var sResult = oStringObject + "world"; 
alert(sResult); // 输 出 “hello world" 
alert(oStringObject); // 输 出 "hello " 


indexOf() 和 lastlndexOf() 方法 


迄今 为 止 ， 已 讨论 过 连接 字符 串 的 方法 ， 访 问 字符 串 中 的 单个 字符 的 方法 。 不 过 如 果 无 法 确 
定 在 某 个 字符 串 中 是 否 确实 存在 一 个 字符 ， 应 该 调用 什么 方法 呢 ?这 时 ， 可 调用 indexOf() 和 
lastIndexOf() 方法 。 


indexOf() 和 lastIndexOf() 方法 返回 的 都 是 指定 的 子 串 在 另 一 个 字符 串 中 的 位 置 ， 如 果 没 有 找 
不 到 子 串 ， 则 返回 -1。 


这 两 个 方法 的 不 同 之 处 在 于 ，indexOf() 方法 是 从 字符 串 的 开头 (位置 0) 开始 检索 字符 串 ， 
而 lastIndexOf() 方法 则 是 从 字符 串 的 结尾 开始 检索 子 串 。 例 如 : 


var oStringObject = new String("hello world!"); 
alert(oStringObject.indexOf("o")); 输出 "4" 
alert(oStringobject.1LastIndexof("o" ) ); 输出 "7" 


在 这 里 ， 第 一 个 "o" 字符 串 出 现在 位 置 4， 即 "hello" 中 的 "o"; 最 后 一 个 "o" 出 现在 位 置 7 
BD "world" 中 的 "o"。 如 果 该 字符 串 中 只 有 一 个 "o" 字符 串 ， 那 么 indexOf() 和 lastlndexOf() 
方法 返 反 回 的 位 置 相同 。 


localeCompare() 方法 
下 一 个 方法 是 localeCompare()， 对 字符 串 进 行 排序 。 该 方法 有 一 个 参数 - 要 进行 比较 的 字符 
串 ， 返 回 的 是 下 列 三 个 值 之 一 : 


e 如 果 String 对 象 按照 字母 顺序 排 在 参数 中 的 字符 串 之 前 ， 返 回 负 数 。 
。 如 果 String 对 象 等 于 参数 中 的 字符 串 ， 返 回 0 
e 如 果 String 对 象 按照 字母 顺序 排 在 参数 中 的 字符 串 之 后 ， 返 回 正 数 。 


注释 : 如 果 返 回 负 数 ， 那 么 最 常见 的 是 -1， 不 过 真正 返回 的 是 由 实现 决定 的 。 如 果 返 回 正 
数 ， 那 么 同样 的 ， 最 常见 的 是 1， 不 过 真正 返回 的 是 由 实现 决定 的 。 


示例 如 下 : 
var oStringObject = new String("yellow"); 
alert(oStringObject.localeCompare("brick")); /7/ 输 出 "1" 
alert(oStringObject.localeCompare("yellow") ); // 输 出 "o" 
alert(oStringObject.localeCompare("zoo")); // 输 出 "-1" 


FRESH, FRE "yellow" 与 3 个 值 进行 了 对 比 ， 即 "brick", "yellow" 和 "zoo"。 由 于 按 
照 字 母 顺 序 排列 ，"yellow" 位 于 "brick" 之 后 ， 所 以 localeCompare() 返回 1 ; "yellow" 等 于 
"yellow"， 所 以 localeCompare() 返回 0 ; "Zoo" 位 于 "yellow" 之 后 ，localeCompare() 返回 
-1。 再 强调 一 次 ， 由 于 返回 的 值 是 由 实现 决定 的 ， 所 以 最 好 以 下 面 的 方式 调用 
localeCompare() 方法 : 


var oStringObject1 
var oStringObject2 


new String("yellow"); 
new String("brick"); 


var iResult = oStringObjecti.localeCompare(oStringObject2); 


if(iResult < 0) { 

alert(oStringObjecti + " comes before " + oStringObject2); 
} else if (iResult > 0) { 

alert(oStringObjecti + " comes after " + oStringObject2); 
} else { 

alert("The two strings are equal"); 


} 


采用 这 种 结构 ， 可 以 确保 这 段 代 码 在 所 有 实现 中 都 能 正确 运行 。 


localeCompare() 方法 的 独特 之 处 在 于 ， 实 现 所 处 的 区 域 (locale， 兼 指 国家 /地 区 和 话 言 ) 确 
切 说 明了 这 种 方法 运行 的 方式 。 在 美国 ， 英 语 是 ECMAScript 实现 的 标准 语言， 
localeCompare() 是 区 分 大 小 写 的 ， 大 写字 母 在 字母 顺序 上 排 在 小 写字 母 之 后 。 不 过 ， 在 其 他 
区 域 ， 情 况 可 能 并 非 如 此 。 


slice() 和 substring() 


ECMAScript 提供 了 两 种 方法 从 子 串 创建 字符 串 值 ， 即 slice() 和 substring()。 这 两 种 方法 返 
回 的 都 是 要 处 理 的 字符 串 的 子 串 ， 都 接受 一 个 或 两 个 参数 。 第 一 个 参数 是 要 获取 的 子 串 的 起 
始 位 置 ， 第 二 个 参数 (如果 使 用 的 话 ) 是 要 获取 子 串 终止 前 的 位 置 (也 就 是 说 ， 获 取 终 止 位 
置 处 的 字符 不 包括 在 返回 的 值 内 ) 。 如 果 省 略 第 二 个 参数 ， 终 止 位 就 默认 为 字符 串 的 长 度 。 


与 concat() 方法 一 样 ，slice() 和 substring() 方法 都 不 改变 String 对 象 自身 的 值 。 它 们 只 返回 
原始 的 String 值 ， 保 持 String 对 象 不 变 。 


var oStringObject = new String("hello world"); 


alert (oStringObject.slice("3")); // 输 出 "lo world" 
alert(oStringObject.substring("3")); // 输 出 "lo world" 
alert(oStringObject.slice("3", "7")); // 输 出 "lo w" 


alert(oString0bject.substring("3", "7")); // 输 出 "lo w" 


在 这 个 例子 中 ，slice() 和 substring() 的 用 法 相同 ， 返 回 值 也 一 样 。 当 只 有 参数 3 时 ， 两 个 方 
法 返回 的 都 是 "lo world", A> "helo" 中 的 第 二 个 "I" 位 于 位 置 3 上 。 当 有 两 个 参数 "3" 和 "7" 
时 ， 两 个 方法 返回 的 值 都 是 "lo w" ("world" 中 的 字母 "o" 位 于 位 置 7 上 ， 所 以 它 不 包括 在 结 
果 中 ) o 


为 什么 有 两 个 功能 完全 相同 的 方法 呢 ?事实 上 ， 这 两 个 方法 并 不 完全 相同 ， 不 过 只 在 参数 为 
负数 时 ， 它 们 义理 参数 的 方式 才 稍 有 不 同 。 


对 于 负数 参数 ，slice() 方法 会 用 字符 串 的 长 度 加 上 参数 ，substring() 方法 则 将 其 作为 0 处 理 
(也 就 是 说 将 忽略 它 ) 。 例 如 : 
var oStringObject = new String("hello world"); 
alert (oStringObject.slice("-3")); // 输 出 "rld" 
alert(oString0bject.substring("-3")); // 输 出 "hello world" 


alert(oStringObject.slice("3, -4")); // 输 出 "lo w" 
alert(oStringObject.substring("3, -4")); // 输 出 "hel" 


这 样 即 可 看 出 slice() 和 substring() 方法 的 主要 不 同 。 


当 只 有 参数 -3 时 ，slice() 返回 "rld"，substring() 则 返回 "hello world"。 这 是 因为 对 于 字符 串 
"hello world", slice("-3") 将 被 转换 成 slice("8")， 而 substring("-3") 将 被 转换 成 
substring("0"). 


同样 ， 使 用 参数 3 和 -4 时 ， 差 别 也 很 明显 。slice() 将 被 转换 成 slice(3, 7)， 与 前 面 的 例子 相 
同 ， 返 回 "low". m substring() 方法 则 将 两 个 参数 解释 为 substring(3, 0)， 实 际 上 即 
substring(0, 3)， 因 为 substring() 总 把 较 小 的 数字 作为 起 始 位 ， 较 大 的 数字 作为 终止 位 。 
此 ，substring("3, -4") 返回 的 是 "hel"。 这 里 的 最 后 一 行 代码 用 来 说 明 如 何 使 用 这 些 方 法 。 


toLowerCase()、toLocaleLowerCase()、toUpperCase() 和 
toLocaleUpperCase() 


最 后 一 套 要 讨论 的 方法 涉及 大 小 写 转 换 。 有 4 种 方法 用 于 执行 大 小 写 转 换 ， 即 


e toLowerCase() 
e toLocaleLowerCase() 
e toUpperCase() 
e toLocaleUpperCase() 


从 名 字 上 可 以 看 出 它们 的 用 途 ， 前 两 种 方法 用 于 把 字符 串 转 换 成 全 小 写 的 ， 后 两 种 方法 用 于 
把 字符 串 转换 成 全 大 写 的 。 


toLowerCase() 和 toUpperCase() 方法 是 原始 的 ， 是 以 java.lang.String 中 相同 方法 为 原型 实 
现 的 。 


toLocaleLowerCase() 和 toLocaleUpperCase() 方法 是 基于 特定 的 区 域 实现 的 (与 
localeCompare() 方法 相同 ) 。 在 许多 区 域 中 ， 区 域 特定 的 方法 都 与 通用 的 方法 完全 相同 。 不 
过 ， 有 几 种 语言 对 Unicode 大 小 写 转 换 应 用 了 特定 的 规则 (例如 土耳其 语 ) ， 因 此 必须 使 用 
区 域 特定 的 方法 才能 进行 正确 的 转换 。 


var oStringObject = new String("Hello World"); 
alert(oStringObject.toLocaleUpperCase()); // 输 出 "HELLO WORLD" 


alert(oStringobject.touppercase() ); // 输 出 "HELLO WORLD" 
alert(oStringObject.toLocaleLowerCase()); // 输 出 "hello world" 
alert(oStringOobject.toLowerCase()); // 输 出 "hello world" 


这 段 代 码 中 ，toUpperCase() 和 toLocaleUpperCase() 输出 的 都 是 "HELLO WORLD", 
toLowerCase() 和 toLocaleLowerCase() 输出 的 都 是 "hello world"。 一 般 来 说 ， 如 果 不 知 道 在 
以 哪 种 编码 运行 一 种 语言 ， 则 使 用 区 域 特定 的 方法 比较 安全 。 


提示 : 记 住 ，String 对 象 的 所 有 属性 和 方法 都 可 应 用 于 String 原始 值 上 ， 因 为 它们 是 伪 对 
象 。 


instanceof 运算 符 


在 使 用 typeof 运算 符 时 采用 引用 类 型 存储 值 会 出 现 一 个 问题 ， 无 论 引 用 的 是 什么 类 型 的 对 
R, GANRE "object", ECMAScript 引入 了 另 一 个 Java 运算 符 instanceof 来 解决 这 个 问 
题 


`O 


instanceof 运算 符 与 typeof 运算 符 相 似 ， 用 于 识别 正在 处 理 的 对 象 的 类 型 。 与 typeof 方法 不 
同 的 是 ，instanceof 方法 要 求 开发 者 明确 地 确认 对 象 为 某 特定 类 型 。 例 如 : 


var oStringObject = new String("hello world"); 
alert(oStringObject instanceof String); // 输 出 "true" 


这 段 代 码 问 的 是 “变量 oStringObject 是 否 为 String 对 象 的 实例 ? ”oStringObject 的 确 是 String 
对 象 的 实例 ， 因 此 结果 是 "true"。 尽 管 不 像 typeof 方法 那样 灵活 ， 但 是 在 typeof 方法 返回 
"object" 的 情况 下 ，instanceof 方法 还 是 很 有 用 的 。 


ECMAScript 运算 符 


ECMAScript 一 元 运算 符 


一 元 运算 符 只 有 一 个 参数 ， 即 要 操作 的 对 象 或 值 。 它 们 是 ECMAScript 中 最 简单 的 运算 符 。 


delete 
delete 运算 符 删除 对 以 前 定义 的 对 象 属性 或 方法 的 引用 。 例 如 : 


var 0 = new Object; 


o.name = "David"; 
alert(o.name); // 输 出 "David" 
“delete o.name; ` 
alert(o.name) ; // 输 出 "undefined" 
在 这 个 例子 中 ， 删 除了 name 属性 ， 意 味 着 强制 解除 对 它 的 引用 ， 将 其 设置 为 undefined ( 即 


创建 的 未 初始 化 的 变量 的 值 ) 。 
delete 运算 符 不 能 删除 开发 者 未 定义 的 属性 和 方法 。 例 如 ， 下 面 的 代码 将 引发 错误 : 


delete o.toString; 


即使 toString 是 有 效 的 方法 名 ， 这 行 代 码 也 会 引发 错误 ， 因 为 toString() 方法 是 原始 的 
ECMAScript 方法 ， 不 是 开发 者 定义 的 。 


void 


void 运算 符 对 任何 值 返 回 undefined。 该 运算 符 通 常用 于 避免 输出 不 应 该 输出 的 值 ， 例 如 ， 从 
HTML 的 <a> 元 素 调 用 JavaScript 画 数 时 。 要 正确 做 到 这 一 点 ， 画 数 不 能 返回 有 效 值 ， 否 则 
浏览 器 将 清 空 页 面 ， 只 显示 加 数 的 结果 。 例 如 : 


<a href="javascript:window.open('about:blank')">Click me</a> 


如 果 把 这 行 代 码 放 入 HTML 页 面 ， 点 击 其 中 的 链接 ， 即 可 看 到 屏幕 上 显示 "[object]"。TIY 


这 是 因为 window.open() 方法 返回 了 新 打开 的 窗口 的 引用 。 然 后 该 对 象 将 被 转换 成 要 显示 的 
字符 串 。 


要 避免 这 种 效果 ， 可 以 用 void 运算 符 调 用 window.open() Ez : 


<a href="javascript:void(window.open('about:blank'))">Click me</a> 


这 使 window.open() 调用 返回 undefined， 它 不 是 有 效 值 ， 不 会 显示 在 浏览 器 窗口 中 。 


提示 : 请 记 住 ， 没 有 返回 值 的 函数 真正 返回 的 都 是 undefined. 


前 增 量 /前 减 量 运算 符 
直接 从 C (和 Java) 借用 的 两 个 运算 符 是 前 增 量 运算 符 和 前 减 量 运算 符 。 
所 谓 前 增 量 运算 符 ， 就 是 数值 上 加 1， 形 式 是 在 变量 前 放 两 个 加 号 (++) 


var iNum = 10; 
++iNum; 


第 二 行 代码 把 iNum 增加 到 了 11， 它 实质 上 等 价 于 : 


var INum = 10; 
iNum = iNum + 1; 


同 祥 ， 前 减 量 运算 符 是 从 数值 上 减 1， 形 式 是 在 变量 前 放 两 个 减 号 〈--) 


var INum = 10; 
--iNum; 


在 这 个 例子 中 ， 第 二 行 代码 把 iNum 的 值 减 到 9。 


在 使 用 前 级 式 运 算 符 时 ， 注 意 培 量 和 减 量 运算 符 都 发 生 在 计算 表达 式 之 前 。 考 虑 下 面 的 例 
ae 


var iNum = 10; 


--iNum; 

alert(iNum); // 输 出 "9" 
alert(--iNum); // 输 出 "8" 
alert(iNum); // 输 出 "8" 


第 二 行 代码 对 iNum 进行 减 量 运算 ， 第 三 行 代 码 显 示 的 结果 是 〈"9") 。 第 四 行 代码 又 对 iNum 
进行 减 量 运 算 ， 不 过 这 次 前 减 量 运算 和 输出 操作 出 现在 同一 个 语句 中 ， 显 示 的 结果 是 "8"。 为 
了 证 明 已 实现 了 所 有 的 减 量 操作 ， 第 五 行 代码 又 输出 一 次 "8"。 


在 算术 表达 式 中 ， 前 增 量 和 前 减 量 运算 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 的 顺序 计 
算 之 。 例 如 : 


var iNum1 2; 


var iNum2 = 20; 
var iNum3 = --iNumi + ++iNum2; // 等 于 "22" 
var iNum4 = iNum1 + iNum2; // 等 于 "22" 


在 前 面 的 代码 中 ，iNum3 等 于 22， 因 为 表达 式 要 计算 的 是 1+21。 变 量 iNum4 也 等 于 22， 
也 是 1+21。 


后 增 量 /后 运算 符 


还 有 两 个 直接 从 C (和 Java) 借用 的 运算 符 ， 即 后 增 量 运算 符 和 后 减 量 运算 符 。 


ml 


增 量 运算 符 也 是 给 数值 上 加 1， 形 式 是 在 变量 后 放 两 个 加 号 (++) 


var iNum = 10; 
iNum++; 


不 出 所 料 ， 后 减 量 运算 符 也 是 从 数值 上 减 1， 形 式 为 在 变量 后 加 两 个 减 号 (--) 


var iNum = 10; 
iNum--; 


第 二 行 代 码 把 iNum 的 值 减 到 9。 


2 a d 后 级 式 运算 符 是 在 计算 过 包含 它们 的 表达 式 后 才 进 行 增 量 或 减 量 
运算 的 。 考 虑 以 下 的 例子 


var INum = 10; 


iNum--; 

alert(iNum); // 输 出 "9" 
alert(iNum--); // 输 出 "9" 
alert(iNum); // 输 出 "8" 


与 前 级 式 运算 符 的 例子 相似 ， 第 二 行 代码 对 iNum 进行 减 量 运算 ， 第 三 行 代 码 显 示 结 果 
("9") 。 第 四 行 代 码 继续 显示 Num 的 值 ， 不 过 这 次 是 在 同一 语句 中 应 用 减 量 运算 符 。 由 于 
减 量 运算 发 生 在 计算 过 表达 式 之 后 ， 所 以 这 条 语句 显示 的 数 是 "9"。 执 行 了 第 五 行 代 码 后 ， 
alert 函数 显示 的 是 "8"， 因 为 在 执行 第 四 行 代码 之 后 和 执行 第 五 行 代码 之 前 ， 执 行 了 后 减 量 运 
算 。 


在 算术 表达 式 中 ， 后 增 量 和 后 减 量 运算 符 的 优先 级 是 相同 的 ， 因 此 要 按照 从 左 到 右 的 顺序 计 
算 之 。 例 如 : 


var INum1 = 2; 
var iNum2 = 20; 
var iNum3 = iNumi-- + iNum2++; // 等 于 "22" 
var iNum4 = iNum1 + iNum2; // 等 于 "22" 


在 前 面 的 代码 中 ，iNum3 等 于 22， 因 为 表达 式 要 计算 的 是 2 + 20。 变 量 iNum4 也 等 于 22， 
过 它 计 算 的 是 1 + 21， 因 为 增 量 和 减 量 运算 都 在 给 Num 赋值 后 才 发 生 。 


一 元 加 法 和 一 元 减法 


大 多 数 人 都 熟悉 一 元 加 法 和 一 元 减法 ， 它 们 在 ECMAScript 中 的 用 法 与 您 高 中 数学 中 学 到 的 
用 法 相同 。 


一 元 加 法 本 质 上 对 数字 无 任何 影响 : 


var iNum = 20; 
INum = +iNum; 
alert(iNum); // 输 出 "20" 


这 段 代 码 对 数字 20 应 用 了 一 元 加 法 ， 返 回 的 还 是 20。 


尽管 一 元 加 法 对 数字 无 作用 ， 但 对 字符 串 却 有 有 趣 的 效果 ， 会 把 字符 串 转 换 成 数字 。 


var SNum = "20"; 
alert(typeof sNum); // 输 出 "string" 
var INum = +sNum; 
alert(typeof iNum); // 输 出 "number" 


这 段 代 码 把 字符 串 "20" 转换 成 真正 的 数字 。 当 一 元 加 法 运算 符 对 字符 串 进 行 操作 时 ， 它 计算 
字符 串 的 方式 与 parselnt() 相似 ， 主 要 的 不 同 是 只 有 对 以 "0x" 开头 的 字符 串 (表示 十 六 进 制 
数字 ) ， 一 元 运算 符 才 能 把 它 转换 成 十 进 制 的 值 。 因 此 ， 用 一 元 加 法 转换 "010"， 得 到 的 总 是 
10， 而 "0xB" 将 被 转换 成 11。 


另 一 方面 ， 一 元 减法 就 是 对 数值 求 负 (例如 把 20 转换 成 -20) 


var iNum = 20; 
INum = -iNum; 
alert(iNum); // 输 出 "-20" 


与 一 元 加 法 运算 符 相 似 ， 一 元 减法 运算 符 也 会 把 字符 串 转 换 成 近似 的 数字 ， 此 外 还 会 对 该 值 
求 负 。 例如 


var SNum = "20"; 

alert(typeof sNum); // 输 出 "string" 
var INum = -sNum; 

alert(iNum); // 输 出 "-20" 


alert(typeof iNum); // 输 出 "number" 


在 上 面 的 代码 中 ， 一 元 减法 运算 符 将 把 字符 串 "-20" 转换 成 -20 (一 元 减法 运算 符 对 十 六 进 制 
和 十 进 制 的 处 理 方式 与 一 元 加 法 运算 符 相 似 ， 只 是 它 还 会 对 该 值 求 负 ) o 


ECMAScript 位 运算 符 


位 运算 符 是 在 数字 底层 〈《 即 表示 数字 的 32 个 数位 ) 进行 操作 的 。 


mM 


ECMAScript 整数 有 两 种 类 型 ， 即 有 符号 整数 (人 允许 用 正 数 和 负数 ) ne 整数 (只 人 允许 用 
正 数 ) 。 在 ECMAScript 中 ， 所 有 整数 字面 量 默认 都 是 有 符号 整数 ， 这 意味 着 什么 呢 ? 


有 符号 整数 使 用 31 位 表示 整数 的 数值 ， 用 第 32 位 表示 整数 的 符号 ，0 表示 正 数 ，1 表示 负 
数 。 数 值 范围 从 -2147483648 到 2147483647。 
可 以 以 两 种 不 同 的 方式 存储 二 进 制 形式 的 有 符号 整数 ， 一 种 用 于 存储 正 数 ， 一 种 用 于 存储 负 
数 。 正 数 是 以 真 二 进 制 形 式 存储 的 ， 前 31 位 中 的 每 一 位 都 表示 2 的 千 ， 从 第 1 位 (位 0) F 
始 ， 表 示 2<sup>0</sup>， 第 2 位 〈 位 1) 表示 2<sup>1</sup>。 没 用 到 的 位 用 0 填充 ， 即 
忽略 不 计 。 例 如 ， 下 图 展示 的 是 数 18 的 表示 法 。 
数 18 
[olololololololololololololololololololololololololololalololalol 
[cc | 
位 31 过 滤器 位 0 
18 的 二 进 制版 本 只 用 了 前 5 位 ， 它 们 是 这 个 数字 的 有 效 位 。 把 数字 转换 成 二 进 制 字符 串 ， 就 
6 看 到 有 效 位 : 


var INum = 18; 
alert(iNum.toString(2)); // 输 出 "10010" 


这 段 代码 只 输出 "10010"， 而 不 是 18 的 32 位 表示 。 其 他 的 数位 并 不 重要 ， 因 为 仅 使 用 前 5 
位 即 可 确定 这 个 十 进 制 数值 。 如 下 图 所 示 : 


1/0/0110 


(24x1) + (23x0) + (22x0) + (21x1) + (20x0) 





16 + 0 + O + 2 + 0 
18 
Anina 进 制 代 码 ， 不 过 采用 的 形式 是 二 进 制 补 码 。 计 算数 字 二 进 制 补 码 的 步 又 有 三 


$ 


1， 确 定 该 数字 的 非 负 版 本 的 二 进 制 表示 (例如 ， 要 计算 -18 的 二 进 制 补 码 ， 首 先 要 确定 18 
的 二 进 制 表示 ) 


2. 求 得 二 进 制 反 码 ， 即 要 把 0 替换 为 1， 把 1 替换 为 0 
3， 在 二 进 制 反 码 上 加 1 


要 确定 -18 的 二 进 制 表 示 ， 首 先 必须 得 到 18 的 二 进 制 表 示 ， 如 下 所 示 : 


0000 0000 0000 0000 0000 0000 0001 0010 


接 下 来 ， 计 算 二 进 制 反 码 ， 如 下 所 示 : 


1111 1111 1111 1111 1111 1111 1110 1101 


最 后 ， 在 二 进 制 反 码 上 加 1， 如 下 所 示 : 


1111 1111 1111 1111 1111 1111 1110 1101 


1111 1111 1111 1111 1111 1111 1110 1110 


因此 ，-18 的 二 进 制 表示 即 1111 1111 1111 1111 1111 1111 1110 1110. 记 住 ， 在 处 理 有 符号 
整数 时 ， 开 发 者 不 能 访问 31 位 。 


有 趣 的 是 ， 把 负 整数 转 换 成 二 进 制 字符 串 后 ，ECMAScript 并 不 以 二 进 制 补 码 的 形式 显示 ， 而 
是 用 数字 绝对 值 的 标准 二 进 制 代 码 前 面 加 负 号 的 形式 输出 。 例 如 : 


var INum = -18; 
alert(iNum.toString(2)); // 输 出 "-10010" 


这 段 代码 输出 的 是 "-10010"， 而 非 二 进 制 补 码 ， 这 是 为 避免 访问 位 31。 为 了 简便 ， 
ECMAScript 用 一 种 简单 的 方式 处 理 整数 ， 使 得 开发 者 不 必 关 心 它们 的 用 法 。 


另 一 方面 ， 无 符号 整数 把 最 后 一 位 作为 另 一 个 数位 处 理 。 在 这 种 模式 中 ， 第 32 位 不 表示 数字 
的 符号 ， 而 是 值 2<sup>31</sup>。 由 于 这 个 额外 的 位 ， 无 符号 整数 的 数值 范围 为 0 到 
4294967295。 对 于 小 于 2147483647 的 整数 来 说 ， (teas caus mA 
于 2147483647 的 整数 则 要 使 用 位 31 (在 有 符号 整数 中 ， 这 一 位 总 是 0) 。 


把 无 符号 整数 转换 成 字符 串 后 ， 只 返回 它们 的 有 效 位 。 


注意 : 所 有 整数 字面 量 都 默认 存储 为 有 符号 整数 。 只 有 ECMAScript 的 位 运算 符 才 能 创建 无 
符号 整数 。 


位 运算 NOT 


位 运算 NOT 由 否定 号 (~) 表示 ， 它 是 ECMAScript 中 为 数 不 多 的 与 二 进 制 算 术 有 关 的 运算 
符 之 一 。 


位 运算 NOT 是 三 步 的 处 理 过 程 : 


1. 把 运算 数 转换 成 32 位 数字 
2. 把 二 进 制 数 转 换 成 它 的 二 进 制 反 码 
3. 把 二 进 制 数 转换 成 浮 点 数 


例如 : 
var iNum1 = 25; //25 SF 00000000000000000000000000011001 
“var iNum2 = ~iNum1;~ // 转 换 为 11111111111111111111111111100110 
alert (iNum2); // 输 出 "-26" 


位 运算 NOT 实质 上 是 对 数字 求 负 ， 然 后 减 1， 因 此 25 % -26。 用 下 面 的 方法 也 可 以 得 到 同样 
的 方法 : 


var iNum1 = 25; 
var iNum2 = -iNum1 -1; 
alert(iNum2); // 输 出 -26 


位 运算 AND 


位 运算 AND AAS (&) 表示 ， 直 接 对 数字 的 二 进 制 形式 进行 运算 。 它 把 每 个 数字 中 的 数位 
对 齐 ， 然 后 用 下 面 的 规则 对 同一 位 置 上 的 两 个 数位 进行 AND 运算 : 


第 一 个 数字 中 的 数位 第 二 个 数字 中 的 数位 结果 
1 1 1 
1 0 0 
0 1 0 
0 0 0 


例如 ， 要 对 数字 25 和 3 进行 AND 运算 ， 代 码 如 下 所 示 : 


var iResult = 25 & 3; 
alert(iResult); // 输 出 "1" 


25 和 3 进行 AND 运算 的 结果 是 1。 为 什么 ?分 析 如 下 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


AND = 0000 0000 0000 0000 0000 0000 0000 0001 


可 以 看 出 ， 在 25 和 3 中 ， 只 有 一 个 数位 (位 0) 存放 的 都 是 1， 因 此 ， 其 他 数位 生成 的 都 是 
0， 所 以 结果 为 1。 


位 运算 OR 


位 运算 OR 由 符号 (|) 表示 ， 也 是 直接 对 数字 的 二 进 制 形式 进行 运算 。 在 计算 每 位 时 ，OR 
运算 符 采 用 下 列 规则 : 


第 一 个 数字 中 的 数位 第 二 个 数字 中 的 数位 结果 
1 1 1 
1 0 1 
0 1 1 
0 0 0 


仍然 使 用 AND 运算 符 所 用 的 例子 ， 对 25 和 3 进行 OR 运算 ， 代 码 如 下 : 


var iResult = 25 | 3; 
alert(iResult); // 输 出 "27" 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


OR = 0000 0000 0000 0000 0000 0000 0001 1011 


可 以 看 出 ， 在 两 个 数字 中 ， 共 有 4 个 数位 存放 的 是 1， 这 些 数位 被 传递 给 结果 。 二 进 制 代码 
11011 等 于 27。 


位 运算 XOR 


位 运算 XOR 由 符号 O) 表示 ， 当 然 ， 也 是 直接 对 二 进 制 形式 进行 运算 。XOR 不 同 于 OR， 
当 只 有 一 个 数位 存放 的 是 1 时 ， 它 才 返 回 1。 真 值 表 如 下 : 


第 一 个 数字 中 的 数位 第 二 个 数字 中 的 数位 结果 
1 1 0 
1 0 1 
0 1 1 
0 0 0 


对 25 和 3 进行 XOR 运算 ， 代 码 如 下 : 


var iResult = 25 ^ 3; 
alert(iResult); // 输 出 "26" 


25 和 3 进行 XOR 运算 的 结果 是 26 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


XOR = 0000 0000 0000 0000 0000 0000 0001 1010 


可 以 看 出 ， 在 两 个 数字 中 ， 共 有 4 个 数位 存放 的 是 1， 这 些 数位 被 传递 给 结果 。 二 进 制 代码 
11010 等 于 26。 


左 移 运 算 
左 移 运 算 由 两 个 小 于 号 表示 (<<) 。 它 把 数字 中 的 所 有 数位 向 左 移动 指定 的 数量 。 例 如 ， 把 
数字 2 (等 于 二 进 制 中 的 10) 左 移 5 位 ， 结 果 为 64 (等 于 二 进 制 中 的 1000000) 


var iOld = 2; // 等 于 二 进 制 10 
var iNew = iOld << 5; // 等 于 二 进 制 1000000 十 进 制 64 


注意 : 在 左 移 数位 时 ， 数 字 右 边 多 出 5 个 空位 。 左 移 运 算 用 0 填充 这 些 空位 ， 使 结果 成 为 完 
整 的 32 位 数字 。 
“秘密 的 ”符号 位 数字 2 


数字 2 向 左 移 5 位 ( 数字 64) EE 
[olololololololololololololololololololololololololilolololololo 


以 口 填充 
注意 : 左 移 运算 保留 数字 的 符号 位 。 例 如 ， 如 果 把 -2 左 移 5 位 ， 得 到 的 是 -64， 而 不 是 
64, "符号 仍然 存储 在 第 32 位 中 吗 ? "是 的 ， 不 过 这 在 ECMAScript 后 台 进 行 ， 开 发 者 不 能 直 
接 访问 第 32 个 数位 。 即 使 输出 二 进 制 字符 串 形 式 的 负数 ， 显 示 的 也 是 负 号 形式 〈 例 如 ，-2 将 
显示 -10。 ) 


有 符号 右 移 运算 


人 
该 数 的 符号 ( 正 号 或 负 号 ) 。 有 符号 右 移 运算 符 恰 好 与 左 移 运算 相反 。 例 如 ， 把 64 右 移 5 
fe. REA 2: 


var iOld = 64; // 等 于 二 进 制 1000000 
var iNew = i01d >> 5; // 等 于 二 进 制 10 十 进 制 2 


同样 ， 移 动 数位 后 会 造成 空位 。 这 次 ， 空 位 位 于 数字 的 左 侧 ， 但 位 于 符号 位 之 后 。 
ECMAScript 用 符号 位 的 信 填 充 这 些 空位 ， 创 建 完 整 的 数字 ， 如 下 图 所 示 : 
“秘密 的 ”符号 位 数字 2 


et 数字 2 向 左 移 5 位 (数字 64) 
[olololololololololololololololololololololololololilolololololo 


以 口 填充 


无 符号 右 移 运算 

无 符号 右 移 运算 符 由 三 个 大 于 号 (>>>) 表示 ， 它 将 无 符号 32 位 数 的 所 有 数位 整体 右 移 。 对 
于 正 数 ， 无 符号 右 移 运 算 的 结果 与 有 符号 右 移 运算 一 样 。 

用 有 符号 右 移 运 算 中 的 例子 ， 把 64 右 移 5 位， 将 变 为 2 : 


var iOld = 64; // 等 于 二 进 制 1000000 
var iNew = i01d >>> 5; // 等 于 二 进 制 10 十 进 制 2 


对 于 负数 ， 情 况 就 不 同 了 。 


无 符号 右 移 运 算 用 0 填充 所 有 空位 。 对 于 正 数 ， 这 与 有 符号 右 移 运算 的 操作 一 样 ， 而 负数 则 
被 作为 正 数 来 处 理 。 


由 于 无 符号 右 移 运 算 的 结果 是 一 个 32 位 的 正 数 ， 所 以 负数 的 无 符号 右 移 运 算得 到 的 总 是 一 个 
非常 大 的 数字 。 例 如 ， 如 果 把 -64 右 移 5 位 ， 将 得 到 134217726。 如 何 得 到 这 种 结果 的 呢 ? 


a 需要 把 这 个 数字 转换 成 无 符号 的 等 价 形式 〈 尽 管 该 数字 本 身 还 是 有 符号 
的 ) ， 过 以 下 代码 获得 这 种 形式 : 


var iUnsigned64 = -64 >>> 0; 


然后 ， 用 Number 类 型 的 toString() 获取 它 的 真正 的 位 表示 ， 采 用 的 基 为 2 : 


alert(iUnsigned64.toString(2)); 


这 将 生成 11111111111111111111111111000000, FIBA SRR -64 的 二 进 制 补 码 表示 ， 不 过 
它 等 于 无 符号 整数 4294967232。 


出 于 这 种 原因 ， 使 用 无 符号 右 移 运算 符 要 小 心 。 


ECMAScript Boolean 运算 符 


Boolean 运算 符 非 常 重要 ， 它 使 得 程序 语言 得 以 正常 运行 。 


Boolean 去 算 符 有 三 种 : NOT, AND 和 OR, 


ToBoolean 操作 


在 学 习 各 种 逻辑 运算 符 之 前 ， 让 我 们 先 了 解 一 下 ECMAScript-262 v5 规范 中 描述 的 
ToBoolean 操作 。 


抽象 操作 ToBoolean 将 其 人 参数 按照 下 表 中 的 规则 转换 为 逻辑 值 : 


参数 类 型 结果 
Undefined false 
Null false 
Boolean 结果 等 于 输入 的 参数 (不 转换 ) 
Number 如 果 参 数 为 +0, -0 或 NaN， 则 结果 为 false ; 否则 为 true。 
String 如 果 参 数 为 空 字 符 串 ， 则 结果 为 false ; 否则 为 true。 
Object true 


逻辑 NOT 运算 符 


{E ECMAScript #, 324 NOT 运算 符 与 C 和 Java 中 的 逻辑 NOT 运算 符 相 同 ， 都 由 感叹 号 
(!) 表示 。 


与 逻辑 OR 和 逻辑 AND 运算 符 不 同 的 是 ， 逻 辑 NOT 运算 符 返 回 的 一 定 是 Boolean 值 。 
逻辑 NOT 运算 符 的 行为 如 下 : 


。 如 果 运 算数 是 对 象 ， 返 回 false 

。 如 果 运 算数 是 数字 0， 返 回 true 

。 如 果 运 算数 是 0 以 外 的 任何 数字 ， 返 回 false 
。 如 果 运 算数 是 null， 返 回 true 

。 如 果 运 算数 是 NaN， 返 回 true 

e 如 果 运 算数 是 undefined， 发 生 错 误 


通常 ， 该 运算 符 用 于 控制 循环 : 


var bFound = false; 
var i= 0; 


“while (!bFound) { 
if (aValue[i] == vSearchValues) { 
bFound = true; 
} else { 
i++; 
} 
} 


在 这 个 例子 中 ，Boolean 变量 (bFound) 用 于 记录 检索 是 否 成 功 。 找 到 问题 中 的 数据 项 时 ， 
bFound 将 被 设置 为 true，!bFound 将 等 于 false， 意 味 着 运行 将 跳出 while 循环 。 


判断 ECMAScript 变量 的 Boolean 值 时 ， 也 可 以 使 用 逻辑 NOT 运算 符 。 这 样 做 需要 在 一 行 代 
码 中 使 用 两 个 NOT 运算 符 。 无 论 运 算数 是 什么 类 型 ， 第 一 个 NOT 运算 符 返 回 Boolean 值 。 
第 二 个 NOT 将 对 该 Boolean 值 求 负 ， 从 而 给 出 变量 真正 的 Boolean 值 。 


var bFalse = false; 

var sRed = "red"; 

var iZero = 0; 

var iThreeFourFive = 345; 
var oObject = new Object; 


document.write("bFalse 的 逻辑 值 是 " + (!!bFalse)); 

document .write("sRed 的 逻辑 值 是 " + (!!sRed)); 

document .write("iZero 的 逻辑 值 是 " + (!!iZero)); 

document ,write("iThreeFourFive 的 逻辑 值 是 " + (!!iThreeFourFive)); 
document.write("oObject 的 逻辑 值 是 " + (!!o00bject)); 


Ay 


ER : 


bFalse 的 逻辑 值 是 false 

sRed 的 逻辑 值 是 true 

iZero 的 逻辑 值 是 false 
iThreeFourFive 的 逻辑 值 是 true 
oObject 的 逻辑 值 是 true 


逻辑 AND 运算 符 
在 ECMAScript P, 244 AND 运算 符 用 双 和 号 (&&) 表示 : 
例如 


var bTrue = true; 
var bFalse = false; 
var bResult = bTrue && bFalse; 


下 面 的 真 值 表 描 述 了 逻辑 AND 运算 符 的 行为 : 


运算 数 1 运算 数 2 结果 


true true true 

true false false 
false true false 
false false false 


逻辑 AND 运算 的 运算 数 可 以 是 任何 类 型 的 ， 不 止 是 Boolean 值 。 
如 果 某 个 运算 数 不 是 原始 的 Boolean W, 3244 AND 运算 并 不 一 定 返 回 Boolean 值 : 


。 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 Boolean 值 ， 返 回 该 对 象 。 
。 如 果 两 个 运算 数 都 是 对 象 ， 返 回 第 二 个 对 象 。 

。 如 果 某 个 运算 数 是 null， 返 回 null, 

。 如 果 某 个 运算 数 是 NaN， 返 回 NaN. 

。 如 果 某 个 运算 数 是 undefined， 发 生 错 误 。 


与 Java 中 的 逻辑 AND 运算 相似 ，ECMAScript 中 的 逻辑 AND 运算 也 是 简便 运算 ， 即 如 果 第 
一 个 运算 数 决 定 了 结果 ， 就 不 再 计算 第 二 个 运算 数 。 对 于 逻辑 AND 运算 来 说 ， 如 果 第 一 个 运 
算数 是 false， 那 么 无 论 第 二 个 运算 数 的 值 是 什么 ， 结 果 都 不 可 能 等 于 true, 


考虑 下 面 的 例子 : 
var bTrue = true; 
var bResult = (bTrue && bUnknown); // 发 生 错 误 
alert(bResult); // 这 一 行 不 会 执行 


这 上段 代码 在 进行 逻辑 AND 运算 时 将 引发 错误 ， 因 为 变量 bUnknown 是 未 定义 的 。 变 量 bTrue 
的 值 为 trtue， 因 为 逻辑 AND 运算 将 继续 计算 变量 bUnknown。 这 样 做 就 会 引发 错误 ， 因 为 
bUnknown 的 值 是 undefined， 不 能 用 于 逻辑 AND 运算 。 


如 果 修改 这 个 例子 ， 把 第 一 个 数 设 为 false， 那 么 就 不 会 发 生 错 误 : 


var bFalse = false; 
var bResult = (bFalse && bUnknown); 
alert(bResult); // 输 出 "false" 


在 这 段 代 码 中 ， 脚 本 将 输出 逻辑 AND 运算 返回 的 值 ， 即 字符 串 "false"。 即 使 变量 bUnknown 
的 值 为 undefined， 它 也 不 会 被 计算 ， 因 为 第 一 个 运算 数 的 值 是 false。 


提示 : 在 使 用 逻辑 AND 运算 符 时 ， 必 须 记 住 它 的 这 种 简便 计算 特性 。 


逻辑 OR 运算 符 


ECMAScript 中 的 逻辑 OR 运算 符 与 Java HAA, SAME (||) Rm: 


var bTrue = true; 
var bFalse = false; 
var bResult = bTrue || bFalse; 


下 面 的 真 值 表 描 述 了 逻辑 OR 运算 符 的 行为 : 


运算 数 1 运算 数 2 结果 
true true true 
true false true 
false true true 
false false false 


与 逻辑 AND 运算 符 相 似 ， 如 果 某 个 运算 数 不 是 Boolean (4, #4 OR 运算 并 不 一 定 返 回 
Boolean 值 : 


。 如 果 一 个 运算 数 是 对 象 ， 并 且 该 对 象 左 边 的 运算 数值 均 为 false， 则 返回 该 对 象 。 
。 如 果 两 个 运算 数 都 是 对 象 ， 返 回 第 一 个 对 象 。 

。 如 果 最 后 一 个 运算 数 是 null， 并 且 其 他 运算 数值 均 为 false， 则 返回 null, 

。 如 果 最 后 一 个 运算 数 是 NaN， 并 且 其 他 运算 数值 均 为 false， 则 返回 NaN. 

。 如 果 某 个 运算 数 是 undefined， 发 生 错 误 。 


与 逻辑 AND 运算 符 一 样 ， 逻 辑 OR 运算 也 是 简便 运算 。 对 于 逻辑 OR 运算 符 来 说 ， 如 果 第 一 
个 运算 数值 为 true， 就 不 再 计算 第 二 个 运算 数 。 


例如 : 
var bTrue = true; 
var bResult = (bTrue || bUnknown); 
alert(bResult); // 输 出 "true" 


与 前 面 的 例子 相同 ， 变 量 bUnknown 是 未 定义 的 。 不 过 ， 由 于 变量 bTrue 的 值 为 true， 
bUnknown 不 会 被 计算 ， 因 此 输出 的 是 "true"。 


如 果 把 bTrue 改 为 false， 将 发 生 错 误 : 


var bFalse = false; 
var bResult = (bFalse || bUnknown); // 发 生 错 误 
alert(bResult); // 不 会 执行 这 一 行 


ECMAScript 乘 性 运算 符 


ECMAScript 的 乘 性 运算 符 与 Java、C、Perl 等 于 语言 中 的 同类 运算 符 的 运算 方式 相似 。 
需要 注意 的 是 ， 乘 性 运算 符 还 具有 一 些 自 动 转换 功能 。 


乘法 运算 符 


乘法 运算 符 由 星 号 (*) 表示 ， 用 于 两 数 相 乘 。 
ECMAScript 中 的 乘法 语法 与 C 语言 中 的 相同 : 


var iResult = 12 * 34 


， 在 处 理 特殊 值 时 ，ECMAScript 中 的 乘法 还 有 一 些 特殊 行为 : 


。 如 果 结 果 太 大 或 太 小 ， 那 么 生成 的 结果 是 Infinity 或 -Infinity。 
。 如 果 某 个 运算 数 是 NaN， 结 果 为 NaN. 

e Infinity 乘 以 0， 结果 为 NaN。 

e Infinity RLA 0 以 外 的 任何 数字 ， 结 果 为 Infinity 或 -Infinity。 
e Infinity FLA Infinity， 结 果 为 Infinity。 


注释 : 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 乘法 运算 ， 即 两 个 正 数 或 两 个 负数 为 正 数 ， 两 个 
运算 数 符号 不 同 ， 结 果 为 负数 。 


除法 运算 符 
MAARRE O) 表示 ， 用 第 二 个 运算 数 除 第 一 个 运算 数 : 


var iResult = 88 /11; 


与 乘法 运算 符 相 似 ， 在 处 理 特殊 值 时 ， 除 法 运算 符 也 有 一 些 特殊 行为 : 


。 如 果 结 果 太 大 或 太 小 ， 那 么 生成 的 结果 是 Infinity 或 -Infinity。 
如 果 某 个 运算 数 是 NaN， 结 果 为 NaN. 

e Infinity 被 Infinity 除 ， 结 果 为 NaN. 

。 Infinity 被 任何 数字 除 ， 结 果 为 Infinity。 

0 除 一 个 任何 非 无 穷 大 的 数字 ， 结 果 为 NaN。 

Infinity 被 0 以 外 的 任何 数字 除 ， 结 果 为 Infinity 或 -Infinity。 


注释 : 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 除法 运算 ， 即 两 个 正 数 或 两 个 负数 为 正 数 ， 两 个 
运算 数 符 号 不 同 ， 结 果 为 负数 。 


取 模 运算 符 


除法 (余数) 运算 符 由 百 分 号 (%) 表示 ， 使 用 方法 如 下 : 


var iResult = 26%5; // 等 于 1 


与 其 他 乘 性 运算 符 相 似 ， 对 于 特殊 值 ， 取 模 运 算 符 也 有 特殊 的 行为 : 


。 如 果 被 除数 是 Infinity， 或 除数 是 0， 结 果 为 NaN. 
e Infinity 被 Infinity 除 ， 结 果 为 NaN. 

如 果 除 数 是 无 穷 大 的 数 ， 结 果 为 被 除数 。 

如 果 被 除数 为 0， 结 果 为 0。 


注释 : 如 果 运 算数 是 数字 ， 那 么 执行 常规 的 算术 除法 运算 ， 返 回 除法 运算 得 到 的 余数 。 


ECMAScript 加 性 运算 符 


在 多 数 程序 设计 语言 中 ， 加 性 运算 符 〈 即 加 号 或 减 号 ) 通常 是 最 简单 的 数学 运算 符 。 
在 ECMAScript 中 ， 加 性 运算 符 有 大 量 的 特殊 行为 。 


加 法 运算 符 
法 运算 符 由 加 号 (+) RM: 


var iResult = 1+ 2 


与 乘 性 运算 符 一 样 ， 在 处 理 特殊 值 时 ，ECMAScript 中 的 加 法 也 有 一 些 特殊 行为 : 


。 某 个 运算 数 是 NaN， 那 么 结果 为 NaN. 
-Infinity 加 -Infinity， 结 果 为 -Infinity。 
Infinity 加 -Infinity， 结 果 为 NaN。 

e +0 加 +0， 结 果 为 +0。 

e -0 加 +0， 结 果 为 +0。 

e -0 加 -0， 结 果 为 -0。 


过 ， 如 果 某 个 运算 数 是 字符 串 ， 那 么 采用 下 列 规则 : 


。 如 果 两 个 运算 数 都 是 字符 串 ， 把 第 二 个 字符 串 连 接 到 第 一 个 上 。 
。 如 果 只 有 一 个 运算 数 是 字符 串 ， 把 另 一 个 运算 数 转换 成 字符 串 ， 结 果 是 两 个 字符 串 连接 
成 的 字符 串 。 


例如 : 
var result = 5 + 5; // 两 个 数字 
alert(result); // 输 出， '10" 
var result2 = 5 + "5" // 一 个 数字 和 一 个 字符 串 
alert(result); /输出 ，! '55" 


这 段 代 码 说 明了 加 法 运算 符 的 两 种 模式 之 间 的 差别 。 正 常情 况 下 ，5+5 等 于 10 (原始 数 

值 ) ， 如 上 述 代 码 中 前 两 行 所 示 。 不 过 ， 如 果 把 一 个 运算 数 改 为 字符 串 "5"， 那 么 结果 将 变 为 
"55" 〈 原 始 的 字符 串 值 ) ， 因 为 另 一 个 运算 数 也 会 被 转换 为 字符 串 。 

注意 : 为 了 避免 JavaScript 中 的 一 种 常见 错误 ， 在 使 用 加 法 运算 符 时 ， 一 定 要 仔细 检查 运算 
数 的 数据 类 型 。 


减法 运算 符 


减法 运算 符 (-) ， 也 是 一 个 常用 的 运算 符 : 


var iResult = 2 - 1; 


与 加 法 运算 符 一 样 ， 在 处 理 特 殊 值 时 ， 减 法 运算 符 也 有 一 些 特殊 行为 : 


。 某 个 运算 数 是 NaN， 那 么 结果 为 NaN. 
e Infinity 减 Infinity， 结 果 为 NaN. 

e -Infinity à -Infinity， 结 果 为 NaN. 

e Infinity 减 -Infinity， 结 果 为 Infinity。 

e -Infinity 减 Infinity， 结 果 为 -Infinity。 

e +0 减 +0， 结 果 为 +0。 

。 -0 减 -0， 结 果 为 -0。 

e +0 减 -0， 结 果 为 +0。 

。 某 个 运算 符 不 是 数字 ， 那 么 结果 为 NaN. 


注释 : 如 果 运 算数 都 是 数字 ， 那 么 执行 常规 的 减法 运算 ， 并 返回 结果 。 


ECMAScript 关系 运算 符 


关系 运算 符 执 行 的 是 比较 运算 。 每 个 关系 运算 符 都 返回 一 个 布尔 值 。 


弟 规 比较 方式 


关系 运算 符 小 于 、 大 于 、 小 于 等 于 和 大 于 等 于 执行 的 是 两 个 数 的 比较 运算 ， 上 比较 方式 与 算术 
比较 运算 相同 。 
每 个 关系 运算 符 都 返回 一 个 布尔 值 : 


//true 
//false 


var bResult1 
var bResult2 


= > 
Se ea) 
不 过 ， 对 两 个 字符 串 应 用 关系 运算 符 ， 它 们 的 行为 则 不 同 。 许 多 人 认为 小 于 表示 “在 字母 顺序 
上 靠 前 ”， 大 于 表示 “在 字母 顺序 上 靠 后 ”， 但 事实 并 非 如 此 。 对 于 字符 串 ， 第 一 个 字符 串 中 每 
个 字符 的 代码 都 与 会 第 二 个 字符 串 中 对 应 位 置 的 字符 的 代码 进行 数值 比较 。 完 成 这 种 比较 操 
作 后 ， 返 回 一 个 Boolean 值 。 问 题 在 于 大 写字 母 的 代码 都 小 于 小 写字 母 的 代码 ， 这 意味 这 着 
可 能 会 遇 到 下 列 情况 : 


var bResult = "Blue" < "alpha"; 
alert(bResult); // 输 出 true 


在 上 面 的 例子 中 ， 字 符 串 "Blue" 小 于 "alpha"， 因 为 字母 B 的 字符 代码 是 66， 字 母 a 的 字符 
代码 是 97。 要 强制 性 得 到 按照 真正 的 字母 顺序 比较 的 结果 ， 必 须 把 两 个 数 转换 成 相同 的 大 小 
BRA (全 大 写 或 全 小 写 的 ) ， 然 后 再 进行 比较 : 


var bResult = "Blue".toLowerCase() < "alpha".toLowerCase(); 
alert(bResult); // 输 出 false 


把 两 个 运算 数 都 转换 成 小 宇 ， 确 保 了 正确 识别 出 "alpha" 在 字母 顺序 上 位 于 "Blue" 之 前 。 


Te ae FA EF EB 
ARE ODOR AE TELL ES ROOW ER, HH : 


var bResult = "25" < "3"; 
alert(bResult); // 输 出 "true" 


上 面 这 段 代 码 比 较 的 是 字符 串 "25" 和 "3"。 两 个 运算 数 都 是 字符 串 ， 所 以 比较 的 是 它们 的 字符 
代码 ("2" 的 字符 代码 是 50，"3" 的 字符 代码 是 51) 。 


不 过 ， 如 果 把 某 个 运算 数 该 为 数字 ， 那 么 结果 就 有 趣 了 : 


var bResult = "25" < 3; 
alert(bResult); // 输 出 "false" 


这 里 ， 字 符 串 "25" 将 被 转换 成 数字 25， 然 后 与 数字 3 进行 比较 ， 结 果 不 出 所 料 。 


无 论 何 时 比较 一 个 数字 和 一 个 字符 串 ，ECMAScript 都 会 把 字符 串 转 换 成 数字 ， 然 后 按照 数字 
顺序 比较 它们 。 


不 过 ， 如 果 字 符 串 不 能 转换 成 数字 又 该 如 何 呢 ? 考虑 下 面 的 例子 : 


var bResult = "a" < 3; 
alert(bResult); 


你 能 预料 到 这 段 代 码 输出 什么 吗 ? 字母 "a" 不 能 转换 成 有 意义 的 数字 。 不 过 ， 如 果 对 它 调用 
parselnt() 方法 ， 返 回 的 是 NaN。 根 据 规则 ， 任 何 包 含 NaN 的 关系 运算 符 都 要 返回 false， 
此 这 上段 代码 也 输出 false : 


var bResult = "a" >= 3; 
alert(bResult); 


通常 ， 如 果 小 于 运算 的 两 个 值 返回 false， 那 么 大 于 等 于 运算 必须 返回 true， 不 过 如 果 某 个 数 
字 是 NaN， 情 况 则 非 如 此 。 


ECMAScript 等 性 运算 符 


判断 两 个 变量 是 否 相等 是 程序 设计 中 非常 重要 的 运算 。 在 处 理 原 始 值 时 ， 这 种 运算 相当 简 
单 ， 但 涉及 对 象 ， 任 务 就 稍 有 点 复 条 。 


ECMAScript 提供 了 两 套 等 性 运算 符 : 等 号 和 非 等 号 用 于 义理 原始 值 ， 全 等 号 和 非 全 等 号 用 
于 义理 对 象 。 


等 号 和 非 等 号 


在 ECMAScript 中 ， 等 号 由 双 等 号 (==) 表示 ， 当 且 仅 当 两 个 运算 数 相 等 时 ， 它 返回 true. 
非 等 号 由 感叹 号 加 等 号 (=) 表示 ， 当 且 仅 当 两 个 运算 数 不 相 等 时 ， 它 返回 true。 为 确定 两 个 
运算 数 是 否 相等 ， 这 两 个 运算 符 都 会 进行 类 型 转换 。 


执行 类 型 转换 的 规则 如 下 : 


。 如 果 一 个 运算 数 是 Boolean 值 ， 在 检查 相等 性 之 前 ， 把 它 转 换 成 数字 值 。false 转换 成 
0，true 为 1。 

。 如 果 一 个 运算 数 是 字符 串 ， 另 一 个 是 数字 ， 在 检查 相等 性 之 前 ， 要 党 试 把 字符 串 转换 成 
数字 。 

。 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 字符 串 ， 在 检查 相等 性 之 前 ， 要 党 试 把 对 象 转 换 成 字 
符 串 。 

。 如 果 一 个 运算 数 是 对 象 ， 另 一 个 是 数字 ， 在 检查 相等 性 之 前 ， 要 党 试 把 对 象 转 换 成 数 
字 。 


在 比较 时 ， 该 运算 符 还 遵守 下 列 规则 : 


。 值 null 和 undefined 相等 。 

。 在 检查 相等 性 时 ， 不 能 把 null 和 undefined 转换 成 其 他 值 。 

。 如 果 某 个 运算 数 是 NaN， 等 号 将 返回 false， 非 等 号 将 返回 true。 

。 如 果 两 个 运算 数 都 是 对 象 ， 那 么 比较 的 是 它们 的 引用 值 。 如 果 两 个 运算 数 指向 同一 对 
象 ， 那 么 等 号 返回 true， 否 则 两 个 运算 数 不 等 。 


重要 提示 : 即使 两 个 数 都 是 NaN， 等 号 仍然 返回 false， 因 为 根据 规则 ，NaN TEF NaN. 
下 表 列 出 了 一 些 特殊 情况 ， 以 及 它们 的 结果 : 


表达 式 值 


null == undefined true 
"NaN" == NaN false 
5 == NaN false 
NaN == NaN false 
NaN != NaN true 
false == true 
true == true 
true == false 
undefined == false 
null == false 
"5" == 5 true 


全 等 号 和 非 全 等 号 


等 号 和 非 等 号 的 同类 运算 符 是 全 等 号 和 非 全 等 号 。 这 两 个 运算 符 所 做 的 与 等 号 和 非 等 号 相 
同 ， 只 是 它们 在 检查 相等 性 前 ， 不 执行 类 型 转换 。 


全 等 号 由 三 个 等 号 表示 (===) ， 只 有 在 无 需 类 型 转换 运算 数 就 相等 的 情况 下 ， 才 返回 true. 


例如 : 
var SNum = "66"; 
var iNum = 66; 
alert(sNum == iNum); // 输 出 "true" 
alert(SNum === iNum); // 输 出 "false" 


在 这 段 代 码 中 ， 第 一 个 alert 使 用 等 号 来 比较 字符 串 "66" 和 数字 66， 输 出 "true"。 如 前 所 
述 ， 这 是 因为 字符 串 "66" 将 被 转换 成 数字 66，， 然 后 才 与 另 一 个 数字 66 进行 比较 。 第 二 个 
alert 使 用 全 等 号 在 没有 类 型 转换 的 情况 下 比较 字符 串 和 数字 ， 当 然 ， 字 符 串 不 等 于 数字 ， 所 
以 输出 "false". 


非 全 等 号 由 感叹 号 加 两 个 等 号 (==) 表示 ， 只 有 在 无 需 类 型 转换 运算 数 不 相 等 的 情况 下 ， 才 
返回 true。 


例如 : 
var SNum = "66"; 
var iNum = 66; 
alert(sNum != iNum); // 输 出 "false" 


alert(sNum !== iNum); // 输 出 "true" 


这 里 ， 第 一 个 alert 使 用 非 等 号 ， 把 字符 串 "66" 转换 成 数字 66， 使 得 它 与 第 二 个 运算 数 66 相 
等 。 因 此 ， 计 算 结 果 为 "false"， 因 为 两 个 运算 数 是 相等 的 。 第 二 个 alert 使 用 的 非 全 等 号 。 访 
运算 是 在 问 : "SNum" 5 "Num" 不 同 吗 ? 这 个 问题 的 答案 是 : 是 的 (true), AA SNum 是 
字符 串 ， 而 iNum 是 数字 ， 它 们 当然 不 同 。 


ECMAScript 条 件 运算 符 
条 件 运 算 符 


条 件 运 算 符 是 ECMAScript 中 功能 最 多 的 运算 符 ， 它 的 形式 与 Java 中 的 相同 。 
_variable = boolean_expression ? true_value : false_value_; 
该 表达 式 主要 是 根据 boolean_expression 的 计算 结果 有 条 件 地 为 变量 赋值 。 如 果 


Boolean_expression 为 ttue， 就 把 true_value 赋 给 变量 ; 如 果 它 是 false， 就 把 false_value 


KA ES. 
例如 : 


var iMax = (iNum1 > iNum2) ? iNum1 : iNum2; 


在 这 里 例子 中 ，iMax 将 被 赋予 数字 中 的 最 大 值 。 表 达 式 声明 如 果 iNum1 AF iNum2， 则 把 
iNum1 赋予 iMax。 但 如 果 表 达 式 为 false ( 即 iNum2 大 于 或 等 于 iNum1) ， 则 把 iNum2 赋 
予 iMax。 


ECMAScript 赋值 运算 符 
赋值 运算 符 


简单 的 赋值 运算 符 由 等 号 (=) 实现 ， 只 是 把 等 号 右边 的 值 赋予 等 号 左边 的 变量 。 
例如 : 


var iNum = 10; 


复合 赋值 运算 是 由 乘 性 运算 符 、 加 性 运算 符 或 位 移 运 算 符 加 等 号 (=) 实现 的 。 这 些 赋值 运算 
符 是 下 列 这 些 常见 情况 的 缩写 形式 : 


var iNum = 10; 
iNum = iNum + 10; 


可 以 用 一 个 复合 赋值 运算 符 改 写 第 二 行 代码 : 


var INum = 10; 
iNum += 10; 


每 种 主要 的 算术 运算 以 及 其 他 几 个 运算 都 有 复合 赋值 运算 符 : 


。 乘法 /赋值 ( *= 

。 除法 /赋值 ( /= ) 

。 取 模 /赋值 ( %= ) 

。 加 法 /赋值 ( += ) 

。 减法 /赋值 ( -= ) 

。 ARIE (<<= ) 

。 ASABE (>> ) 
。 无 符号 右 移 / 赋 值 ( >>>= ) 


ECMAScript 喜 号 运算 符 


用 至 号 运算 符 可 以 在 一 条 语句 中 执行 多 个 运算 。 
例如 : 


var INum1 = 1, iNum = 2, iNum3 = 3; 


逗号 运算 符 常用 变量 声明 中 。 


ECMAScript 语句 


ECMAScript if 语句 


if 语句 是 ECMAScript 中 最 常用 的 语句 之 一 。 


ECMAScript 语句 


ECMA - 262 描述 了 ECMAScript 的 几 种 语句 (statement) 。 


HH 


语句 主要 定义 了 ECMAScript 的 大 部 分 语句 ， 通 常 采 用 一 个 或 多 个 关键 字 ， 完 成 给 定 的 人 
务 。 


语句 可 以 非常 简单 ， 例 如 通知 函数 退出 ， 也 可 以 非常 复 休 ， 如 声明 一 组 要 反复 执行 的 命令 。 


在 《ECMAScript 语句 》 这 一 章 ， 我 们 介绍 了 所 有 标准 的 ECMAScript 语句 。 


if 语句 
if 语句 是 ECMAScript 中 最 常用 的 语句 之 一 ， 事 实 上 在 许多 计算 机 语言 中 都 是 如 此 。 
if 语句 的 语法 : 


if” (_condition_) _statement1 “else” _statement2_ 


其 中 condition 可 以 是 任何 表达 式 ， 计 算 的 结果 甚至 不 必 是 真正 的 boolean 14, ECMAScript 
会 把 它 转 换 成 boolean 值 。 


如 果 条 件 计算 结果 为 true， 则 执行 statement? ; 如 果 条 件 计算 结果 为 false， 则 执行 
statement2. 


每 个 语句 都 可 以 是 单行 代码 ， 也 可 以 是 代码 块 。 
例如 : 


if (i > 30) 
{alert("AF 30");} 

else 

{alert(" 小 于 等 于 30");} 


提示 : 使 用 代码 块 被 认为 是 一 种 最 佳 的 编程 实践 ， 即 使 要 执行 的 代码 只 有 一 行 。 这 样 做 可 以 
使 每 个 条 件 要 执行 什么 一 目 了 然 。 


还 可 以 串联 多 个 ji 语句。 就 像 这 样 : 


‘if (_condition1_) _statement1 “else if`ò (_condition2_) _statement2_ “else” _statement3 
ki — 
例如 : 





if (i > 30) { 
alert("AF 30"); 

} else if (i < 0) { 
alert(" 小 于 0"); 

} else { 
alert("%E 0 到 30 Zi"); 


ECMAScript 迭代 语句 


和 迭代 语句 又 叫 循 环 语句 ， 声 明 一 组 要 反复 执行 的 命 舍 ， 直 到 满足 某 些 条 件 为 止 。 
循环 通常 用 于 迭代 数组 的 值 〈 因 此 而 得 名 ) ， 或 者 执行 重复 的 算术 任务 。 
本 节 为 您 介绍 ECMAScript 提供 的 四 种 迭代 语句 。 


do-while 语句 


do-while 语句 是 后 测试 循环 ， 即 退出 条 件 在 执行 循环 内 部 的 代码 之 后 计算 。 这 意味 着 在 计算 
表达 式 之 前 ， 至 少 会 执行 循环 主体 一 次 。 


它 的 语法 如 下 : 


‘do {_statement_} `while` (_expression_); 


例子 : 


var i = 0; 
do i+ += 2;} while (i < 10); 


while 语句 


while 语句 是 前 测试 循环 。 这 意味 着 退出 条 件 是 在 执行 循环 内 部 的 代码 之 前 计算 的 。 因 此 ， 循 
环 主体 可 能 根本 不 被 执行 。 


它 的 语法 如 下 : 


while” (_expression_) _statement_ 


例子 


var i= 0; 
while ü < 10) { 
ab a= 2p 


} 


for 语句 


for 语句 是 前 测试 循环 ， 而 且 在 进入 循环 之 前 ， 能 够 初始 化 变量 ， 并 定义 循环 后 要 执行 的 代 
码 。 


它 的 语法 如 下 : 


`for` (_initialization; expression; post-loop-expression_) _statement_ 


注意 : post-loop-expression 之 后 不 能 写 分 号 ， 否 则 无 法 运行 。 


例子 : 


iCount = 6; 
for (var i = 0; i < iCount; i++) { 
alert(i); 


这 段 代 码 定义 了 初始 值 为 0 的 变量 i。 只 有 当 条 件 表达 式 (i < iCount) 的 值 为 true at, Fa 
入 for 循环 ， 这 样 循环 主体 可 能 不 被 执行 。 如 果 执行 了 循环 主体 ， 那 么 将 执行 循环 后 表达 式 ， 
PERIE i 

for-in 语句 

for 语句 是 严格 的 迭代 语句 ， 用 于 枚 举 对 象 的 属性 。 

它 的 语法 如 下 : 


`for` (_property_ `in`ò _expression_) _statement_ 


例子 : 


for (SProp in window) { 
alert(sProp); 


这 里 ，for-in 语句 用 于 显示 window 对 象 的 所 有 属性 。 


前 面 讨 论 过 的 PropertylsEnumerable() 是 ECMAScript 中 专门 用 于 说 明 属 性 是 否 可 以 用 for-in 
语句 访问 的 方法 。 


ECMAScript 标签 语句 


有 标签 的 语句 
可 以 用 下 列 语句 给 语句 加 标签 ， 以 便 以 后 调用 : 


_label_ : _statement_ 


在 这 个 例子 中 ， 标 签 start 可 以 被 之 后 的 break 或 continue 语句 引用 。 


提示 : 在 下 面 的 章节 ， 我 们 将 为 您 介绍 break 和 continue 语句 。 


ECMAScript break 和 continue 语句 


break 和 continue 语句 对 循环 中 的 代码 执行 提供 了 更 严格 的 控制 。 


break 和 continue 语句 的 不 同 之 义 


break 语句 可 以 立即 退出 循环 ， 阻 止 再 次 反复 执行 任何 代码 。 
而 continue 语句 只 是 退出 当前 循环 ， 根 据 控制 表达 式 还 允许 继续 进行 下 一 次 循环 。 
例如 : 


var iNum = 0; 
for (var i=1; i<10; i++) { 
if (i % 5 == 0) { 
~ break; ` 


iNum++; 


} 
alert(iNum); //3 "4" 


在 以 上 代码 中 ，for 循环 从 1 到 10 迭代 变量 i。 在 循环 主体 中 ，if 语句 将 (使 用 取 模 运算 符 ) 


检查 i 的 值 是 否 能 被 5 整除 。 如 果 能 被 5 整除 ， 将 执行 break 语句 。alert 显示 "4"， 即 退出 循 
环 前 执行 循环 的 次 数 。 


如 果 用 continue 语句 代替 这 个 例子 中 的 break 语句 ， 结 果 将 不 同 : 


var INum = 0; 


for (var i=1; i<10; i++) { 
if (i % 5 == 0) { 
~continue; ` 


iNum++; 


} 
alert(iNum); // 输 出 "8" 


这 里 ，alert 将 显示 "8"， 即 执行 循环 的 次 数 。 可 能 执行 的 循环 总 数 为 9， 不 过 当 ji 的 值 为 5 
at, $4447 continue 语句 ， 会 使 循环 跳 过 表达 式 iNum++， 返 回 循环 开头 。 


与 有 标签 的 语句 一 起 使 用 
break 语句 和 continue 语句 都 可 以 与 有 标签 的 语句 联合 使 用 ， 返 回 代 码 中 的 特定 位 置 。 


通常 ， 当 循环 内 部 还 有 循环 时 ， 会 这 样 做 ， 例 如 : 


var INum = 0; 
outermost: 
for (var i=0; i<10; i++) { 
for (var j=0; j<10; j++) { 
if (i == 5 && j == 5) { 
‘break outermost; ` 


iNum++; 
} 
} 


alert(iNum); // 输 出 "55" 


在 上 面 的 例子 中 ， 标 签 outermost 表示 的 是 第 一 个 for 语句 。 正 常情 况 下 ， 每 个 for 语句 执行 
10 次 代码 块 ， 这 意味 着 iNum++ 正常 情况 下 将 被 执行 100 次 ， 在 执行 完成 时 ，iNum 应 该 等 
于 100。 这 里 的 break 语句 有 一 个 参数 ， 即 停止 循环 后 要 跳 转 到 的 语句 的 标签 。 这 样 break 
语句 不 止 能 跳出 内 部 for 语句 〈 即 使 用 变量 j 的 语句 ) ， 还 能 跳出 外 部 for 语句 〈 即 使 用 变量 | 
的 语句 ) 。 因 此 ，iNum 最 后 的 值 是 55， 因 为 当 i 和 j 的 值 都 等 于 5 时 ， 循 环 将 终止 。 


可 以 以 相同 的 方式 使 用 continue 语句 : 


var INum = 0; 
outermost: 
for (var i=0; i<10; i++) { 
for (var j=0; j<10; j++) { 
if (i == 5 && j == 5) { 
‘continue outermost; 


iNum++; 
} 
} 


alert(iNum); // 输 出 "95" 
在 上 例 中 ，continue 语句 会 迫使 循环 继续 ， 不 止 是 内 部 循环 ， 外 部 循环 也 如 此 。 当 j 等 于 5 
时 出 现 这 种 情况 ， 意 味 着 内 部 循环 将 减少 5 次 迭代 ， 致 使 Num 的 值 为 95。 


提示 : 可 以 看 出 ， 与 break 和 continue 联合 使 用 的 有 标签 语句 非常 强大 ， 不 过 过 度 使 用 它们 
会 给 调试 代码 带 来 麻烦 。 要 确保 使 用 的 标签 具有 说 明 性 ， 同 时 不 要 艇 套 太 多 层 循 环 。 


提示 : 想 了 解 什么 是 有 标签 语句 ， 请 阅读 ECMAScript 标签 语句 这 一 节 。 


ECMAScript with 语句 


有 标签 的 语句 
with 语句 用 于 设置 代码 在 特定 对 象 中 的 作用 域 。 


它 的 语法 : 


with (_expression_) _statement_ 


例如 : 


var sMessage = "hello"; 
with(sMessage) { 
alert(toUpperCase()); // 输 出 "HELLO" 


在 这 个 例子 中 ，with 语句 用 于 字符 串 ， 所 以 在 调用 toUpperCase() 方法 时 ， 解 释 程 序 将 检查 
该 方法 是 否 是 本 地 函数 。 如 果 不 是 ， 它 将 检查 伪 对 象 SMessage， 看 它 是 否 为 该 对 象 的 方法 。 
然后 ，alert 输出 "HELLO"， 因 为 解释 程序 找到 了 字符 串 "hello" 的 toUpperCase() 方法 。 


提示 : with 语句 是 运行 缓慢 的 代码 块 ， 尤 其 是 在 已 设置 了 属性 值 时 。 大 多 数 情况 下 ， 如 果 可 
能 ， 最 好 避免 使 用 它 。 


ECMAScript switch 语句 


switch 语句 


switch 语句 是 if 语句 的 兄弟 语句 。 
开发 者 可 以 用 switch 语句 为 表达 式 提 供 一 系列 的 情况 (case) 。 


switch 语句 的 语法 : 


switch (_expression_) 


case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 

case _value_: _statement_; 
break; 


default: _statement_; 


每 个 情况 (case) 都 是 表示 “如 果 expression $F value， 就 执行 statement’. 


关键 字 break 会 使 代码 跳出 switch 语句 。 如 果 没 有 关键 字 break， 代 码 执行 就 会 继续 进入 下 
一 个 case。 


关键 字 default 说 明了 表达 式 的 结果 不 等 于 任何 一 种 情况 时 的 操作 (事实 上 ， 它 相对 于 else 
从 句 ) o 


switch 语句 主要 是 为 避免 让 开发 者 编写 下 面 的 代码 : 


if (i == 20) 
alert("20"); 
else if (i == 30) 
alert("30"); 
else if (i == 40) 
alert("40"); 

else 
alert("other"); 


等 价 的 switch 语句 是 这 样 的 : 


switch (i) 
case 20: alert("20"); 
break; 
case 30: alert("30"); 
break; 
case 40: alert("40"); 
break; 
default: alert("other"); 
} 


ECMAScript 和 Java 中 的 switch 3% 


ECMAScript 和 Java 中 的 switch 语句 有 两 点 不 同 。 在 ECMAScript 中 ，switch 语句 可 以 用 于 
字符 串 ， 而 且 能 用 不 是 常量 的 值 说 明 情 况 : 


var BLUE = "blue", RED = "red", GREEN = "green"; 


switch (sColor) { 
case BLUE: alert("Blue"); 


break; 

case RED: alert("Red"); 
break; 

case GREEN: alert("Green"); 
break; 

default: alert("Other"); 


} 


这 里 ，switch 语句 用 于 字符 串 SColor， 声 明 case 使 用 的 是 变量 BLUE, RED 和 GREEN, 
这 在 ECMAScript 中 是 完全 有 效 的 。 


ECMAScript 西数 


ECMAScript 函数 概述 


Ts ERA? 
KAEA T DU ny ETAN, 
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数 是 ECMAScript 的 核心 。 


函数 是 由 这 样 的 方式 进行 声明 的 : 关键 字 function、 画 数 名 、 一 组 参数 ， 以 及 置 于 括号 中 的 待 
执行 代码 。 
函数 的 基本 语法 是 这 样 的 : 


function _functionName(arg0, arg1 
_statements 


, «+. argn)y. f{ 
; = 


例如 : 


function sayHi(sName, sMessage) { 
alert("Hello " 


+ sName + sMessage); 


30 (0) ABIR? 


RMA Lt RESUS BRATA, MRASTER, 
如 果 您 想 调 用 上 例 中 的 那个 函数 ， 可 以 使 用 如 下 的 代码 


sayHi("David", " Nice to meet you!") 


调用 上 面 的 函数 sayHi() 会 生成 一 个 警告 


口 。 您 可 以 亲自 试 一 试 这 个 例子 。 


图 数 如 何 返 回 值 ? 


函数 sayHi() 未 返回 值 ， 不 过 不 必 专 门 声 明 它 ( 像 在 Java 中 使 用 void ABH) 。 
即使 函数 确实 有 值 ， 也 不 必 明 确 地 声明 它 。 该 画 数 只 需要 使 用 return 运算 符 后 跟 要 返回 的 值 
Bay, 


function Sum(INum1， iNum2) { 
return iNumi + iNum2; 


} 


下 面 的 代码 把 sum 琅 数 返回 的 值 赋予 一 个 变量 : 


var iResult = sum(1,1); 
alert(iResult); // 输 出 "2" 


另 一 个 重要 概念 是 ， 与 在 Java 中 一 样 ， 男 数 在 执行 过 return 语句 后 立即 停止 代码 。 因 此 ， 
return 语句 后 的 代码 都 不 会 被 执行 。 


例如 ， 在 下 面 的 代码 中 ，alert 窗口 就 不 会 显示 出 来 : 


function Sum(INum1， iNum2) { 
return iNumi + iNum2; 
alert(iNumi + iNum2); 


} 


一 个 回 数 中 可 以 有 多 个 return 语句 ， 如 下 所 示 : 


function diff(iNumi, iNum2) { 
if (iNum1 > iNum2) { 
return iNumi - iNum2; 
} else { 
return iNum2 - iNum1; 


} 
} 


上 面 的 函数 用 于 返回 两 个 数 的 差 。 要 实现 这 一 点 ， 必 须 用 较 大 的 数 减 去 较 小 的 数 ， 因 此 用 于 
语句 决定 执行 哪个 return 语句 。 


如 果 图 数 无 返回 值 ， 那 么 可 以 调用 没有 参数 的 return 运算 符 ， 随 时 退出 函数 。 
例如 : 


function sayHi(sMessage) { 
if (sMessage == "bye") { 
return; 


} 


alert(sMessage); 


} 


这 段 代 码 中 ， 如 果 sMessage 等 于 "bye"， 就 永远 不 显示 警告 框 。 


注释 : 如 果 图 数 无 明确 的 返回 值 ， 或 调用 了 没有 参数 的 return 语句 ， 那 么 它 真 正 返回 的 值 是 
undefined。 


ECMAScript arguments 对 象 


arguments 对 象 


ARAN SH, AR AR arguments， 开 发 者 无 需 明 确 指 出 参数 名 ， 就 能 访问 它们 。 


Gal, TERA sayHi() 中 ， 第 一 个 参数 是 message. AA arguments[0] 也 可 以 访问 这 个 值 ， 即 
第 一 个 参数 的 值 (第 一 个 参数 位 于 位 置 0， 第 二 个 参数 位 于 位 置 1， 依 此 类 推 ) 。 


因此 ， 无 需 明 确 命 名 参数 ， 就 可 以 重 写 辑 数 : 


function sayHi() { 
if (arguments[0] == "bye") { 
return; 


alert(arguments[0]); 
} 


仿 测 参数 个 数 
还 可 以 用 arguments 对 象 检 测 画 数 的 参数 个 数 ， 引 用 属性 arguments.length 即 可 。 
下 面 的 代码 将 输出 每 次 调用 函数 使 用 的 参数 个 数 : 


function howManyArgs() { 
alert(arguments.length); 


} 


howManyArgs("string", 45); 
howManyArgs(); 
howManyArgs(12); 


上 面 这 段 代码 将 依次 显示 "2"、"0" 和 "1"。 


注释 : 与 其 他 程序 设计 语言 不 同 ，ECMAScript 不 会 验证 传递 给 函数 的 参数 个 数 是 否 等 于 函数 
定义 的 参数 个 数 。 开 发 者 定义 的 函数 都 可 以 接受 任意 个 数 的 参数 (根据 Netscape 的 文档 ， 最 
多 可 接受 255 个 ) ， 而 不 会 引发 任何 错误 。 任 何 遗 漏 的 参数 都 会 以 undefined 传递 给 函数 ， 
多 余 的 函数 料 忽略 。 


Fe ph NB RK 


FA arguments xt 32 FT 26 ARISTA, BA eA RH : 


function doAdd() { 
if(arguments.length == 1) { 
alert(arguments[0] + 5); 
} else if(arguments.length == 2) { 
alert(arguments[0] + arguments[1]); 


} 


doAdd(10); 。 // 输 出 "15" 
doAdd(40, 20); ”// 输 出 "60" 


当 只 有 一 个 参数 时 ，doAdd() 函数 给 参数 加 5。 如 果 有 两 个 参数 ， 则 会 把 两 个 参数 相 加 ， 返 回 
它们 的 和 。 所 以 ，doAdd(10) 输出 的 是 "15"， 而 doAdd(40, 20) 输出 的 是 "60"。 


虽然 不 如 重 载 那 么 好 ， 不 过 已 足以 避 开 ECMAScript 的 这 种 限制 。 


ECMAScript Function 对 象 (类 ) 


ECMAScript 的 函数 实际 上 是 功能 完整 的 对 象 。 


Function 对 象 (类 


ECMAScript 最 倒 人 感 尖 趣 的 可 能 莫 过 于 函数 实际 上 是 功能 完整 的 对 象 。 


Function 类 可 以 表示 开发 者 定义 的 任何 函数 。 


用 Function 类 直接 创建 琅 数 的 语法 如 下 : 


var function_name = new function(_arg1_, 


_argN_, 





在 上 面 的 形式 中 ， 每 个 arg 都 是 一 个 参数 ， 最 后 一 个 参数 是 


些 参数 必须 是 字符 串 。 
记得 下 面 这 个 图 数 吗 ? 


function sayHi(sName, sMessage) { 
alert("Hello " + SName + sMessage); 


var sayHi 


_function_body_) 


PEA 〈 要 执行 的 代码 ) 。 这 


new Function("sName", "sMessage", "alert(\"Hello \" + SName + sMessage);"); 


虽然 由 于 字符 串 的 关系 ， 这 种 形式 写 起 来 有 些 困难 ， 但 有 助 于 理解 函数 只 
型 ， 它 们 的 行为 与 用 Function 类 明确 创建 的 函数 行为 是 相同 的 。 


请 看 下 面 这 个 例子 


function doAdd(iNum) { 
alert(iNum + 20); 
} 


function doAdd(iNum) { 
alert(iNum + 10); 
} 


doAdd(10); 。” // 输 出 "20" 


如 你 所 知 ， 第 二 个 函数 重 载 了 第 一 个 函数 ， 使 doAdd(10) 输出 了 "20", 


过 是 一 种 引用 类 


而 不 是 "30"。 


如 果 以 下 面 的 形式 重 写 该 代码 块 ， 这 个 概念 就 清楚 了 : 


var doAdd = new Function("iNum", "alert(iNum + 20)"); 
var doAdd = new Function("iNum", "alert(iNum + 10)"); 
doAdd(10); 
请 观察 这 段 代码 ， 很 显然 ，doAdd KARAR SAA RAH. BNR SSA 


对 象 的 引用 值 ， 行 为 就 像 其 他 对 象 一 样 。 甚 至 可 以 使 两 个 变量 指向 同一 个 画 数 : 


var doAdd = new Function("iNum", "alert(iNum + 10)"); 
var alsodoAdd = doAdd; 

doAdd(10); // 输 出 "20" 

alsodoAdd(10) ; // 输 出 "20" 


TRE, FB doAdd REL AWA, AA alsodoAdd 被 声明 为 指向 同一 个 画 数 的 指针 。 用 这 
两 个 变量 都 可 以 执行 该 汞 数 的 代码 ， 并 输出 相同 的 结果 - "20"。 因 此 ， 如 果 阔 数 名 只 是 指向 画 
数 的 变量 ， 那 么 可 以 把 范 数 作为 参数 传递 给 另 一 个 函数 吗 ? 回答 是 肯定 的 ! 


function callAnotherFunc(fnFunction, vArgument) { 
fnFunction(vArgument ) ; 


} 
var doAdd = new Function("iNum", "alert(iNum + 10)"); 


callAnotherFunc(doAdd, 10); // "20" 


在 上 面 的 例子 中 ，callAnotherFunc() 有 两 个 参数 - 要 调用 的 函数 和 传递 给 该 画 数 的 参数 。 这 
段 代码 把 doAdd() 传递 给 callAnotherFunc() 函数 ， 参 数 是 10， 输 出 "20"。 


注意 : 尽管 可 以 使 用 Function 构造 画 数 创建 画 数 ， 但 最 好 不 要 使 用 它 ， 因 为 用 它 定 义 画 数 比 
用 传统 方式 要 慢 得 多 。 不 过 ， 所 有 加 数 都 点 看 作 Function 类 的 实例 。 


Function 对 象 的 length 属性 


如 前 所 述 ， 画 数 属于 引用 类 型 ， 所 以 它们 也 有 属性 和 方法 。 


ECMAScript 定义 的 属性 length 声明 了 函数 期 望 的 参数 个 数 。 例 如 : 


function doAdd(iNum) { 
alert(iNum + 10); 
} 


function sayHi() { 
alert("Hi"); 
} 


alert(doAdd.1length); // 输 出 "1" 
alert(sayHi.length); // 输 出 "o" 


RA doAdd() 定义 了 一 个 参数 ， 因 此 它 的 length 是 1 ; sayHi() 没有 定义 参数 ， 所 以 length 


是 0。 


记 住 ， 无 论 定 义 了 几 个 参数 ，ECMAScript 可 以 接受 任意 多 个 参数 (最 多 25 个 ) ， 这 一 点 在 
《西数 概述 》 这 一 章 中 讲解 过 。 属 性 length 只 是 为 查看 默认 情况 下 预期 的 参数 个 数 提供 了 一 
种 简便 方式 。 


Function 对 象 的 方法 


Function 对 象 也 有 与 所 有 对 象 共享 的 valueOf() 方法 和 toString) 方法 。 这 两 个 方法 返回 的 都 
是 画 数 的 源 代码 ， 在 调试 时 尤其 有 用 。 例 如 : 


function doAdd(iNum) { 
alert(iNum + 10); 


document .write(doAdd.toString()); 


上 面 这 段 代 码 输 出 了 doAdd() 函数 的 文本 。 ! 


ECMAScript 闭 包 (closure) 


ECMAScript 最 易 让 人 误解 的 一 点 是 ， 它 支持 闭 包 (closure) 。 


闭 包 ， 指 的 是 词法 表示 包括 不 被 计算 的 变量 的 画 数 ， 也 就 是 说 ， 画 数 可 以 使 用 范 数 之 外 定义 
的 变量 。 


简单 的 闭 包 实 例 
在 ECMAScript 中 使 用 全 局 变量 是 一 个 简单 的 闭 包 实例 。 请 思考 下 面 这 段 代 码 : 


var sMessage = "hello world"; 
function sayHelloworld() { 


alert(sMessage); 


sayHelloworld(); 


在 上 面 这 段 代 码 中 ， 脚 本 被 载 入 内 存 后 ， 并 没有 为 函数 sayHelloWorld() 计算 变量 sMessage 
Ayia. HR sMessage 的 值 只 是 为 了 以 后 的 使 用 ， 也 就 是 说 ， 解 释 程 序 知道 在 调用 该 
Aa BH Az sMessage 的 值 。sMessage 将 在 画 数 调用 sayHelloWorld() 时 (最 后 一 行 ) 被 
赋值 ， 显 示 消 息 "hello world", 


复杂 的 闭 包 实例 
在 一 个 函数 中 定义 另 一 个 会 使 闭 包 变 得 更 加 复杂 。 例 如 : 


var iBaseNum = 10; 
function addNum(iNum1, iNum2) { 
function doAdd() { 
return iNumi + iNum2 + iBaseNum; 


} 
return doAdd(); 


RE, BYR addNum() 包括 函数 doAdd() (Ae). ARWMeE-THa, A*ACHRERA 
部 男 数 的 参数 iNum1 和 iNum2 以 及 全 局 变量 iBaseNum 的 值 。 addNum() 的 最 后 一 步调 用 
了 doAdd()， 把 两 个 参数 和 全 局 变量 相 加 ， 并 返回 它们 的 和 。 


这 里 要 掌握 的 重要 概念 是 ，doAdd() 函数 根本 不 接受 参数 ， 它 使 用 的 值 是 从 执行 环境 中 获取 
的 。 


可 以 看 到 ， 闭 包 是 ECMAScript 中 非常 强大 多 用 的 一 部 分 ， 可 用 于 执行 复 灯 的 计算 。 


提示 : 就 像 使 用 任何 高 级 函数 一 样 ， 使 用 闭 包 要 小 心 ， 因 为 它们 可 能 会 变 得 非常 复杂 。 


ECMAScript 对 象 


ECMAScript 面向 对 象 技 术 


面向 对 象 术语 
对 象 


ECMA-262 把 对 象 (object) 定义 为 “属性 的 无 序 集合 ， 每 个 属性 存放 一 个 原始 值 、 对 象 或 函 
数 "。 严 格 来 说 ， 这 意味 着 对 象 是 无 特定 顺序 的 值 的 数组 。 


尽管 ECMAScript 如 此 定义 对 象 ， 但 它 更 通用 的 定义 是 基于 代码 的 名 词 (人 、 地 点 或 事物 ) 
的 表示 。 


每 个 对 象 都 由 类 定义 ， 可 以 把 类 看 做 对 象 的 配方 。 类 不 仅 要 定义 对 象 的 接口 (interface) (F 
发 者 访问 的 属性 和 方法 ) ， 还 要 定义 对 象 的 内 部 工作 〈 使 属性 和 方法 发 挥 作用 的 代码 ) 。 编 
译 器 和 解释 程序 都 根据 类 的 说 明 构 建 对 象 。 


实例 


程序 使 用 类 创建 对 象 时 ， 生 成 的 对 象 叫 作 类 的 实例 (instance) 。 对 类 生成 的 对 象 的 个 数 的 唯 
一 限制 来 自 于 运行 代码 的 机 器 的 物理 内 存 。 每 个 实例 的 行为 相同 ， 但 实例 处 理 一 组 独立 的 数 
据 。 由 类 创建 对 象 实例 的 过 程 叫做 实例 化 (instantiation) 。 


在 前 面 的 章节 我 们 提 到 过 ，ECMAScript 并 没有 正式 的 类 。 相 反 ，ECMA-262 把 对 象 定义 描述 
为 对 象 的 配方 。 这 是 ECMAScript 逻辑 上 的 一 种 折 中 方案 ， 因 为 对 象 定义 实际 上 是 对 象 自 
身 。 即 使 类 并 不 真正 存在 ， 我 们 也 把 对 象 定义 叫做 类 ， 因 为 大 多 数 开 发 者 对 此 术语 更 熟悉 ， 
而 且 从 功能 上 说 ， 两 者 是 等 价 的 。 


面向 对 象 语 言 的 要 求 
一 种 面向 对 象 语言 需要 向 开发 者 提供 四 种 基本 能 


封装 - 把 相关 的 信息 (无 论 数据 或 方法 ) 存储 在 对 象 中 的 能 
聚集 - 把 一 个 对 象 存储 在 另 一 个 对 象 内 的 能 

继承 - 由 另 一 个 类 (或 多 个 类 ) 得 来 类 的 属性 和 方法 的 能 
BA - 编写 能 以 多 种 方法 运行 的 范 数 或 方法 的 能 


入 D> 


ECMAScript 支持 这 些 要 求 ， 因 此 可 被 是 看 做 面向 对 象 的 。 


对 象 的 构成 


在 ECMAScript 中 ， 对 象 由 特性 (attribute) 构成 ， 特 性 可 以 是 原始 值 ， 也 可 以 是 引用 值 。 如 
果 特 性 存放 的 是 函数， 它 将 被 看 作对 象 的 方法 (method) ， 否 则 该 特性 被 看 作对 象 的 属性 
(property) 。 


ECMAScript 对 象 应 用 


对 象 的 创建 和 销毁 都 在 JavaScript 执行 过 程 中 发 生 ， 理 解 这 种 范式 的 含义 对 理解 整个 语言 至 
关 重 要 。 


声明 和 实例 化 
对 象 的 创建 方式 是 用 关键 字 new 后 面 跟 上 实例 化 的 类 的 名 字 : 


var oObject = new Object(); 
var oStringObject = new String(); 


第 一 行 代 码 创 建 了 Object 类 的 一 个 实例 ， 并 把 它 存储 到 变量 oObject 中 。 第 二 行 代码 创建 了 
String 类 的 一 个 实例 ， 把 它 存 储 在 变量 oStringObject 中 。 如 果 构 造 画 数 无 参数 ， 括 号 则 不 是 
必需 的 。 因 此 可 以 采用 下 面 的 形式 重 写 上 面 的 两 行 代码 : 


var oObject = new Object; 
var oStringObject = new String; 


对 象 引用 


在 前 面 的 章节 中 ， 我 们 介绍 了 引用 类 型 的 概念 。 在 ECMAScript 中 ， 不 能 访问 对 象 的 物理 表 
示 ， 只 能 访问 对 象 的 引用 。 每 次 创建 对 象 ， 存 储 在 变量 中 的 都 是 该 对 象 的 引用 ， 而 不 是 对 象 
本 身 。 


对 象 废除 


ECMAScript 拥有 无 用 存储 单元 收集 程序 (garbage collection routine) ， 意 味 着 不 必 专 门 销 
毁 对 象 来 释放 内 存 。 当 再 没有 对 对 象 的 引用 时 ， 称 该 对 象 被 废除 (dereference) 了 。 运 行 无 
用 存储 单元 收集 程序 时 ， 所 有 上 废除 的 对 象 都 被 销毁 。 每 当 男 数 执行 完 它 的 代码 ， 无 用 存储 单 
元 收集 程序 都 会 运行 ， 释 放 所 有 的 局 部 变量 ， 还 有 在 一 些 其 他 不 可 预知 的 情况 下 ， 无 用 存储 
单元 收集 程序 也 会 运行 。 


把 对 象 的 所 有 引用 都 设置 为 null， 可 以 强制 性 地 废除 对 象 。 例 如 : 


var oObject = new Object; 
// do something with the object here 
oObject = null; 


当 变 量 oObject 设置 为 null 后 ， 对 第 一 个 创建 的 对 象 的 引用 就 不 存在 了 。 这 意味 着 下 次 运行 
无 用 存储 单元 收集 程序 时 ， 该 对 象 将 被 销毁 。 


每 用 完 一 个 对 象 后 ， 就 将 其 废除 ， 来 释放 内 存 ， 这 是 个 好 习惯 。 这 样 还 确保 不 再 使 用 已 经 不 
能 访问 的 对 象 ， 从 而 防止 程序 设计 错误 的 出 现 。 此 外 ， 旧 的 浏览 器 (如 IE/MAC) 没有 全 面 的 
无 用 存储 单元 收集 程序 ， 所 以 在 卸载 页 面 时 ， 对 象 可 能 不 能 被 正确 销毁 。 废 除 对 象 和 它 的 所 
有 特性 是 确保 内 存 使 用 正确 的 最 好 方法 。 


注意 : 废除 对 象 的 所 有 引用 时 要 当心 。 如 果 一 个 对 象 有 两 个 或 更 多 引用 ， 则 要 正确 废除 该 对 
象 ， 必 须 将 其 所 有 引用 都 设置 为 null。 


FA ie FE AAR AE TE 


ATI SRE (binding) ， 即 把 对 象 的 接口 与 对 象 实例 结合 在 一 起 的 方法 。 


gE (early binding) 是 指 在 实例 化 对 象 之 前 定义 它 的 属性 和 方法 ， 这 样 编译 器 或 解释 程序 
就 能 够 提前 转换 机 器 代码 。 在 Java 和 Visual Basic 这 样 的 语言 中 ， 有 了 早 绑 定 ， 就 可 以 在 开 
发 环境 中 使 用 IntelliSense ( 即 给 开发 者 提供 对 象 中 属性 和 方法 列表 的 功能 ) 。ECMAScript 
不 是 强 类 型 语言 ， 所 以 不 支持 早 绑 定 。 

AAA, Mee (late binding) 指 的 是 编译 器 或 解释 程序 在 运行 前 ， 不 知道 对 象 的 类 型 。 

使 用 晚 绑 定 ， 无 需 检 查 对 象 的 类 型 ， 只 需 检查 对 象 是 否 支 持 属 性 和 方法 即 可 。ECMAScript 中 
的 所 有 变量 都 采用 晚 绑 定 方法 。 这 样 就 允许 执行 大 量 的 对 象 操作 ， 而 无 任何 惩罚 。 


ECMAScript 对 象 类 型 


在 ECMAScript 中 ， 所 有 对 象 并 非 同 等 创建 的 。 
一 般 来 说 ， 可 以 创建 并 使 用 的 对 象 有 三 种 : 本 地 对 象 、 内 置 对 象 和 宿主 对 象 。 


本 地 对 象 


ECMA-262 把 本 地 对 象 (native object) 定义 为 “独立 于 宿主 环境 的 ECMAScript 实现 提供 的 
对 象 "。 简 单 来 说 ， 本 地 对 象 就 是 ECMA-262 定义 的 类 (引用 类 型 ) 。 它 们 包括 : 


e Object 

e Function 

e Array 

e String 

e Boolean 

e Number 

e Date 

e RegExp 

e Error 

e EvalError 
e RangeError 
e ReferenceError 
e SyntaxError 
e TypeError 
e URIError 


相关 页 面 


JavaScript 高 级 教程 : ECMAScript 引用 类 型 
JavaScript 高 级 教程 : ECMAScript Function 类 
JavaScript 参考 手册 : Array 对 象 

JavaScript 参考 手册 : Boolean 对 象 
JavaScript 参考 手册 : Date 对 象 

JavaScript 参考 手册 : Number 对 象 


JavaScript 参考 手册 : String 对 象 


JavaScript 参考 手册 : RegExp 对 象 


内 置 对 象 


ECMA-262 把 内 置 对 象 (built-in object) 定义 为 “由 ECMAScript 实现 提供 的 、 独 立 于 宿主 环 
境 的 所 有 对 象 ， 在 ECMAScript 程序 开始 执行 时 出 现 ”。 这 意味 着 开发 者 不 必 明 确实 例 化 内 置 
对 象 ， 它 已 被 实例 化 了 。ECMA-262 只 定义 了 两 个 内 置 对 象 ， 即 Global 和 Math (它们 也 是 
本 地 对 象 ， 根 据 定义 ， 每 个 内 置 对 象 都 是 本 地 对 象 )。 


相关 页 面 
JavaScript 参考 手册 : Global 对 象 


JavaScript 参考 手册 : Math 对 象 


mi ~ 

宿主 对 象 

所 有 非 本 地 对 象 都 是 宿主 对 象 (host object) ， 即 由 ECMAScript 实现 的 宿主 环境 提供 的 对 
象 。 


所 有 BOM 和 DOM 对象 都 是 宿主 对 象 。 


相关 页 面 
JavaScript 高 级 教程 : JavaScript 实现 
W3School 参考 手册 : JavaScript 参考 手册 


W3School 教程 : HTML DOM 教程 


ECMAScript 对 象 作 用 域 


作用 域 指 的 是 变量 的 适用 范围 。 


公用 、 私 有 和 受 保护 作用 域 


A 
/以 


在 传统 的 面向 对 象 程序 设计 中 ， 主 要 关注 于 公用 和 私有 作用 域 。 公 用 作用 域 中 的 对 象 属性 可 
以 从 对 象 外 部 访问 ， 即 开发 者 创建 对 象 的 实例 后 ， 就 可 使 用 它 的 公用 属性 。 而 私有 作用 域 中 
的 属性 只 能 在 对 象 内 部 访问 ， 即 对 于 外 部 世界 来 说 ， 这 些 属性 并 不 存在 。 这 意味 着 如 果 类 定 
义 了 私有 属性 和 方法 ， 则 它 的 子 类 也 不 能 访问 这 些 属性 和 方法 。 


受 保护 作用 域 也 是 用 于 定义 私有 的 属性 和 方法 ， 只 是 这 些 属 性 和 方法 还 能 被 其 子 类 访问 。 


ECMAScript 只 有 公用 作用 域 


对 ECMAScript 讨论 上 面 这 些 作用 域 几乎 毫 无 意义 ， 因 为 ECMAScript 中 只 存在 一 种 作用 域 - 
43 FAVE FAS. ECMAScript 中 的 所 有 对 象 的 所 有 属性 和 方法 都 是 公用 的 。 因 此 ， 定 义 自己 的 类 
和 对 象 时 ， 必 须 格 外 小 心 。 记 住 ， 所 有 属性 和 方法 默认 都 是 公用 的 ! 
建议 性 的 解决 方法 

许多 开发 者 都 在 网 上 提出 了 有 效 的 属性 作用 域 模 式 ， 解 决 了 ECMAScript 的 这 种 问题 。 


由 于 缺少 私有 作用 域 ， 开 发 者 确定 了 一 个 规约 ， 说 明 哪些 属性 和 方法 应 该 被 看 做 私有 的 。 这 
种 规约 规定 在 属性 前 后 加 下 划 线 : 


obj._color_ = "blue"; 


这 段 代 码 中 ， 属 性 color 是 私有 的 。 注 意 ， 下 划 线 并 不 改变 属性 是 公用 属性 的 事实 ， 它 只 是 告 
诉 其 他 开发 者 ， 应 该 把 该 属性 看 作 私有 的 。 


有 些 开 发 者 还 喜欢 用 单 下 划 线 说 明 私 有 成 员 ， 例 如 : obj. color. 


静态 作用 域 


静态 作用 域 定 义 的 属性 和 方法 任何 时 候 都 能 从 同一 位 置 访 问 。 在 Java 中 ， 类 可 具有 属性 和 方 
法 ， 无 需 实例 化 该 类 的 对 象 ， 即 可 访问 这 些 属性 和 方法 ， 例 如 java.net.URLEncoder 类 ， 它 
的 函数 encode() 就 是 静态 方法 。 


ECMAScript 没有 静态 作用 域 


严格 来 说 ，ECMAScript 并 没有 静态 作用 域 。 不 过 ， 它 可 以 给 构造 酌 数 提供 属性 和 方法 。 还 记 
得 吗 ， 构 造 事 数 只 是 东 数 。 函 数 是 对 象 ， 对 象 可 以 有 属性 和 方法 。 例 如 : 
function sayHello() { 


alert("hello"); 
} 


sayHello.alternate = function() { 
alert("hi"); 


sayHello(); // 输 出 "hello" 
sayHello.alternate(); // 输 出 "hi" 


TY 


这 里 ， 方 法 alternate() 实际 上 是 函数 sayHello MAK. ALHRARRSMBA—-HAR 
sayHello() 输出 "hello"， 也 可 以 调用 sayHello.alternate() 输出 "hi"。 即 使 如 此 ，alternate() 也 
是 sayHello() 公用 作用 域 中 的 方法 ， 而 不 是 静态 方法 。 


关键 字 this 


this 的 功能 


在 ECMAScript 中 ， 要 掌握 的 最 重要 的 概念 之 一 是 关键 字 this 的 用 法 ， 它 用 在 对 象 的 方法 
中 。 关 键 字 this 总 是 指向 调用 该 方法 的 对 象 ， 例 如 : 


var oCar = new Object; 

oCar.color = "red"; 

oCar.showColor = function() { 
alert( this,color ); 


oCar.showColor(); // 输 出 "red" 


TIY 


在 上 面 的 代码 中 ， 关 键 字 this 用 在 对 象 的 showColor() 方法 中 。 在 此 环境 中 ，this $F 
oCar。 下 面 的 代码 与 上 面 的 代码 的 功能 相同 : 


var oCar = new Object; 

oCar.color = "red"; 

oCar.showColor = function() { 
alert(`oCar.color`); 


’ 


oCar.showColor(); // 输 出 "red" 


oY 


使 用 this 的 原因 


为 什么 使 用 this 呢 ?因为 在 实例 化 对 象 时 ， 总 是 不 能 确定 开发 者 会 使 用 什么 样 的 变量 名 。 使 
用 this， 即 可 在 任何 多 个 地 方 重用 同一 个 函数 。 请 思考 下 面 的 例子 : 


function showColor() { 
alert( this,color ); 


了 


var oCari = new Object; 
oCari.color = "red"; 
oCar1.showColor = showColor; 


var oCar2 = new Object; 
oCar2.color = "blue"; 
oCar2.showColor = showColor; 


oCari.showColor(); // 输 出 "red" 
oCar2.showColor(); // 输 出 "blue" 
TIY 


在 上 面 的 代码 中 ， 首 先 用 this 定义 函数 showColor()， 然 后 创建 两 个 对 象 (oCar1 和 

oCar2) ， 一 个 对 象 的 color 属性 被 设置 为 "red"， 另 一 个 对 象 的 color 属性 被 设置 为 "blue"。 
两 个 对 象 都 被 赋予 了 属性 showColor， 指 向 原始 的 showColor () 函数 (注意 这 里 不 存在 命名 
问题 ， 因 为 一 个 是 全 局 函数 ， 而 另 一 个 是 对 象 的 属性 ) 。 调 用 每 个 对 象 的 showColor()， 
oCar1 输出 是 "red"， 而 oCar2 的 输出 是 "blue"。 这 是 因为 调用 oCar1.showColor() 1t, BR 
中 的 this 关键 字 等 于 oCar1。 调 用 oCar2.showColor() st, AXA this 关键 字 等 于 
oCar2, 


注意 ， 引 用 对 象 的 属性 时 ， 必 须 使 用 this 关键 字 。 例 如 ， 如 果 采 用 下 面 的 代码 ，showColor() 
方法 不 能 运行 : 
function showColor() { 


alert( color ); 


}; 


MIRA At RX this 关键 字 引 用 变量 ，ECMAScript 就 会 把 它 看 作 局 部 变量 或 全 局 变量 。 然 后 
该 函数 将 查找 名 为 coor 的 局 部 或 全 局 变量 ， 但 是 不 会 找到 。 结 果 如 何 呢 ? 该 画 数 将 在 警告 


显示 "null". 


. mo. Se à 
ECMAScript 定义 类 或 对 象 
使 用 预定 义 对 象 只 是 面向 对 象 语言 的 能 力 的 一 部 分 ， 它 真正 强大 之 处 在 于 能 够 创建 自己 专用 
的 类 和 对 象 。 
ECMAScript 拥有 很 多 创建 对 象 或 类 的 方法 。 


工厂 方式 
原始 的 方式 


因为 对 象 的 属性 可 以 在 对 象 创建 后 动态 定义 ， 所 有 许多 开发 者 都 在 JavaScript 最 初 引 入 时 编 
写 类 似 下 面 的 代码 : 


var oCar = new Object; 

oCar.color = "blue"; 

oCar.doors = 4; 

oCar.mpg = 25; 

oCar.showColor = function() { 
alert(this.color); 


TIY 


在 上 面 的 代码 中 ， 创 建 对 象 car。 然 后 给 它 设置 几 个 属性 : 它 的 颜色 是 蓝 色 ， 有 四 个 门 ， 每 加 
仓 油 可 以 跑 25 英里 。 最 后 一 个 属性 实际 上 是 指向 范 数 的 指针 ， 意 味 着 该 属性 是 个 方法 。 执 行 
这 段 代 码 后 ， 就 可 以 使 用 对 象 car。 


不 过 这 里 有 一 个 问题 ， 就 是 可 能 需要 创建 多 个 car 的 实例 。 
解决 方案 : 工厂 方式 
要 解决 该 问题 ， 开 发 者 创造 了 能 创建 并 返回 特定 类 型 的 对 象 的 工厂 函数 (factory function) 。 


SA, Žr createCar() 可 用 于 封装 前 面 列 出 的 创建 car 对 象 的 操作 : 


function createCar() { 
var oTempCar = new Object; 
oTempCar.color = "blue"; 
oTempCar.doors = 4; 
oTempCar.mpg = 25; 
oTempCar.showColor = function() { 
alert(this.color); 


eS 
return oTempCar,; 


} 

var oCar1 = createCar(); 

var oCar2 = createCar(); 
HY 


在 这 =, 第 一 个 例子 中 的 所 有 代码 都 包含 在 createCar() 函数 中 。 此 外 ， 还 有 一 行 额外 的 代 

码 ， 返 回 car 对 象 (oTempCar) 作为 函数 值 。 调 用 此 函数 ， 将 创建 新 对 象 ， 并 赋予 它 所 有 必 
要 的 属性 ， 复 制 出 一 个 我 们 在 前 面 说 明 过 的 car 对 象 。 因 此 ， 通 过 这 种 方法 ， 我 们 可 以 很 容 
易 地 创建 car 对 象 的 两 个 版 本 (oCar1 和 oCar2) ， 它 们 的 属性 完全 一 样 。 


ABR te BSR 


我 们 还 可 以 修改 createCar() 函数 ， 给 它 传递 各 个 属性 的 默认 值 ， 而 不 是 简单 地 赋予 属性 默认 
值 : 


function createCar(sColor,iDoors,iMpg) { 
var oTempCar = new Object; 
oTempCar.color = sColor; 
oTempCar.doors = iDoors; 
oTempCar.mpg = iMpg; 
oTempCar.showColor = function() { 
alert(this.color); 


l 
return oTempCar; 


} 

var oCari = createCar("red",4,23); 

var oCar2 = createCar("blue",3,25); 

oCar1.showColor(); // 输 出 "red" 

oCar2.showColor(); // 输 出 "blue" 
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给 createCar() K&S, Bal % ZAER car xt RH color, doors 和 mpg 属性 赋值 。 
这 使 两 个 对 象 具有 相同 的 属性 ， 却 有 不 同 的 属性 值 。 


FELT PAE Lt RATE 


虽然 ECMAScript 越 来 越 正式 化 ， 但 创建 对 象 的 方法 却 被 置之不理 ， 且 其 规范 化 至 今 还 遭 人 
反对 。 一 部 分 是 语义 上 的 原因 〈 它 看 起 来 不 像 使 用 带 有 构造 画 数 new 运算 符 那 么 正规 ) ， 
部 分 是 功能 上 的 原因 。 功 能 原因 在 于 用 这 种 方式 必须 创建 对 象 的 方法 。 前 面 的 例子 中 ， 每 次 


调用 函数 createCar()， 都 要 创建 新 函数 showColor()， 意 味 着 每 个 对 象 都 有 自己 的 
showColor() 版 本 。 而 事实 上 ， 每 个 对 象 都 共享 同一 个 画 数 。 


有 些 开发 者 在 工厂 汞 数 外 定义 对 象 的 方法 ， 然 后 通过 属性 指向 该 方法 ， 从 而 避免 这 个 问题 : 


function showColor() { 
alert(this.color); 

p 

function createCar(sColor,iDoors,iMpg) { 
var oTempCar = new Object; 
oTempCar.color = sColor; 
oTempCar.doors = iDoors; 
oTempCar.mpg = iMpg; 
~oTempCar.showColor = showColor;~ 
return oTempCar; 


} 

var oCari = createCar("red",4,23); 

var oCar2 = createCar("blue",3,25); 

oCari.showColor(); // 输 出 "red" 

oCar2.showColor(); // 输 出 "blue" 
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在 上 面 这 上 段 重 写 的 代码 中 ， 在 函数 createCar() ZAI XL FAR showColor(), 4 createCar() 
内 部 ， 赋 予 对 象 一 个 指向 已 经 存在 的 showColor() 函数 的 指针 。 从 功能 上 讲 ， 这 样 解决 了 重 
复 创 建 画 数 对 象 的 问题 ; 但 是 从 语义 上 讲 ， 该 男 数 不 太 像 是 对 象 的 方法 。 


所 有 这 些 问 题 都 引发 了 开发 者 定义 的 构造 画 数 的 出 现 。 


HERRA 


Ep ie gA RRD. BDA, BARRAR. RIER 
例 ， 这 个 名 字 的 首 字母 大 写 ， 以 使 它 与 首 字母 通常 是 小 写 的 变量 名 分 开 。 除 了 这 点 不 同 ， 构 
A 请 考虑 下 面 的 例子 


function Car(sColor,iDoors,iMpg) { 
this .color = sColor; 
this .doors = iDoors; 
this ,mpg = iMpg; 
‘this .showColor = function() { 
alert(this.color); 


J; 
} 
var oCari = ‘new Car("red",4, 23); 
var oCar2 = ‘new Car("blue",3,25); 


TY 


下 面 为 您 解释 上 面 的 代码 与 工厂 方式 的 差别 。 首 先 在 构造 画 数 内 没有 创建 对 象 ， 而 是 使 用 this 
关键 字 。 使 用 new 运算 符 构 造 画 数 时 ， 在 执行 第 一 行 代 码 前 先 创建 一 个 对 象 ， 只 有 用 this + 
能 访问 该 对 象 。 然 后 可 以 直接 赋予 this 属性 ， 默 认 情 况 下 是 构造 画 数 的 返回 值 (不必 明确 使 
用 return 运算 符 ) 。 


现在 ， 用 new 运算 符 和 类 名 Car 创建 对 象 ， 就 更 像 ECMAScript 中 一 般 对 象 的 创建 方式 了 。 
你 也 许 会 问 ， 这 种 方式 在 管理 范 数 方面 是 否 存 在 于 前 一 种 方式 相同 的 问题 呢 ? 是 的 。 


就 像 工厂 范 数 ， 构 造 责 数 会 重复 生成 画 数 ， Ta cea a HRA, Bit, GL 
PERR, tea LARS S ie, eth, RAMBLLAEARL. 这 正 是 
下 面 要 讲 的 原型 方式 的 优势 所 在 。 


原型 方式 
该 方式 利用 了 对 象 的 prototype 属性 ， 可 以 把 它 看 成 创建 新 对 象 所 依赖 的 原型 。 


这 里 ， 首 先 用 空 构 造 画 数 来 设置 类 名 。 然 后 所 有 的 属性 和 方法 都 被 直接 赋予 prototype 属性 。 
我 们 重 宇 了 前 面 的 例子 ， 代 码 如 下 : 


function Car() { 


} 


Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25, 
Car.prototype.showColor = function() { 
alert(this.color); 


var oCari = new Car(); 
var oCar2 = new Car(); 
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在 这 段 代 码 中 ， 首 先 定义 构造 范 数 (Car) ， 其 中 无 任何 代码 。 接 下 来 的 几 行 代码 ， 通 过 给 
Car 的 prototype 属性 添加 属性 去 定义 Car 对 象 的 属性 。 调 用 new Car() 时 ， 原 型 的 所 有 属性 
都 被 立即 赋予 要 创建 的 对 象 ， 意 味 着 所 有 Car 实例 存放 的 都 是 指向 showColor() HANH 
针 。 从 语义 上 讲 ， 所 有 属性 看 起 来 都 属于 一 个 对 象 ， 因 此 解决 了 前 面 两 种 方式 存在 的 问题 。 


此 外 ， 使 用 这 种 方式 ， 还 能 用 instanceof 运算 符 检 查 给 定 变量 指向 的 对 象 的 类 型 。 因 此 ， 下 
面 的 代码 将 输出 TRUE : 


alert(oCari instanceof Car); // 输 出 "true" 


原型 方式 的 问题 


原型 方式 看 起 来 是 个 不 错 的 解决 方案 。 遗 憾 的 是 ， 它 并 不 尽 如 人 意 。 


首先 ， 这 个 构造 画 数 没有 参数 。 使 用 原型 方式 ， 不 能 通过 给 构造 画 数 传递 参数 来 初始 化 属性 
的 值 ， 因 为 Car1 和 Car2 的 color 属性 都 等 于 "blue"，doors 属性 都 等 于 4，mpg 属性 都 等 于 
25。 这 意味 着 必须 在 对 象 创建 后 才能 改变 属性 的 默认 值 ， 这 点 很 合 人 讨 拓 ， 但 还 没完 。 真 正 
的 问题 出 现在 属性 指向 的 是 对 象 ， 而 不 是 函数 时 。 画 数 共 享 不 会 造成 问题 ， 但 对 象 却 很 少 被 
多 个 实例 共享 。 请 思考 下 面 的 例子 : 


function Car() { 


} 


Car.prototype.color = "blue"; 

Car.prototype.doors = 4; 

Car.prototype.mpg = 25, 

~Car.prototype.drivers = new Array("Mike","John");~ 

Car.prototype.showColor = function() { 
alert(this.color); 


var oCar1 
var oCar2 


new Car(); 
new Car(); 


~“oCari.drivers.push("Bill");~ 


alert(oCari.drivers); // 输 出 "Mike, John, Bill" 
alert(oCar2.drivers); // 输 出 "Mike, John, Bill" 
TIY 


上 面 的 代码 中 ， 属 性 drivers 是 指向 Array 对 象 的 指针 ， 该 数组 中 包含 两 个 名 字 "Mike" 和 
"John", FF drivers 是 引用 值 ，Car 的 两 个 实例 都 指向 同一 个 数组 。 这 意味 着 给 
oCar1.drivers 添加 值 "Bil"， 在 oCar2.drivers 中 也 能 看 到 。 输 出 这 两 个 指针 中 的 任何 一 个 ， 
结果 都 是 显示 字符 串 "Mike,John,Bill"。 


由 于 创建 对 象 时 有 这 人 么 多 问题 ， 你 一 定 会 想 ， 是 否 有 种 合理 的 创建 对 象 的 方法 呢 ? 答案 是 
有 ， 需 要 联合 使 用 构造 图 数 和 原型 方式 。 


混合 的 构造 画 数 /原型 方式 


联合 使 用 构造 画 数 和 原型 方式 ， 就 可 像 用 其 他 程序 设计 语言 一 样 创建 对 象 。 这 种 概念 非常 简 
单 ， 即 用 构造 画 数 定义 对 象 的 所 有 非 函 数 属性 ， 用 原型 方式 定义 对 象 的 函数 属性 (方法 ) 。 
结果 是 ， 所 有 图 数 都 只 创建 一 次 ， 而 每 个 对 象 都 具有 自己 的 对 象 属性 实例 。 


我 们 重 宇 了 前 面 的 例子 ， 代 码 如 下 : 


function Car(sColor,iDoors,iMpg) { 
this.color = sColor; 
this.doors = iDoors; 
this.mpg = iMpg; 
this.drivers = new Array("Mike","John"); 


} 


Car.prototype.showColor = function() { 
alert(this.color); 


J}; 
var oCari = new Car("red", 4,23); 
var oCar2 = new Car("blue",3,25); 


oCari.drivers.push("Bill"); 


alert(oCari.drivers); // 输 出 "Mike, John, Bill" 
alert(oCar2.drivers); // 输 出 "Mike, John" 
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WET BR OZR. MAFRA EREA RAAE, BRA AE AMIE 
函数 的 参数 赋予 属性 默认 值 了 。 因 为 只 创建 showColor() 函数 的 一 个 实例 ， 所 以 没有 内 存 浪 
费 。 此 外 ， 给 oCar1 的 drivers 数组 添加 "Bill" 值 ， 不 会 影响 到 oCar2 的 数组 ， 所 以 输出 这 些 
数组 的 值 时 ，oCar1.drivers 显示 的 是 "Mike,John,Bill"， 而 oCar2.drivers 显示 的 是 
"Mike,John"。 因 为 使 用 了 原型 方式 ， 所 以 仍然 能 利用 instanceof 运算 符 来 判断 对 象 的 类 型 。 


这 种 方式 是 ECMAScript 采用 的 主要 方式 ， 它 具有 其 他 方式 的 特性 ， 却 没有 他 们 的 副作用 。 
不 过 ， 有 些 开发 者 仍 觉得 这 种 方法 不 够 完美 。 


动态 原型 方法 


对 于 习惯 使 用 其 他 语言 的 开发 者 来 说 ， 使 用 混合 的 构造 范 数 /原型 方式 感觉 不 那么 和 谐 。 毕 
竟 ， 定 义 类 时 ， 大 多 数 面 向 对 象 语言 都 对 属性 和 方法 进行 了 视觉 上 的 封装 。 请 考虑 下 面 的 
Java 类 : 


class Car { 
public String color = "blue"; 
public int doors = 4; 
public int mpg = 25; 


public Car(String color, int doors, int mpg) { 
this.color = color; 
this.doors = doors; 
this.mpg = mpg; 

} 


public void showColor() { 
System.out.println(color); 
} 
} 


Java 很 好 地 打包 了 Car 类 的 所 有 属性 和 方法 ， 因 此 看 见 这 段 代 码 就 知道 它 要 实现 什么 功能 ， 
它 定义 了 一 个 对 象 的 信息 。 批 评 混合 的 构造 画 数 /原型 方式 的 人 认为 ， 在 构造 酌 数 内 部 找 属 
性 ， 在 其 外 部 找 方 法 的 做 法 不 合 逮 辑 。 因 此 ， 他 们 设计 了 动态 原型 方法 ， 以 提供 更 友好 的 编 
码 风格 。 


动态 原型 方法 的 基本 想法 与 混合 的 构造 酚 数 /原型 方式 相同 ， 即 在 构造 画 数 内 定义 非 丁 数 属 
性 ， 而 函数 属性 则 利用 原型 属性 定义 。 唯 一 的 区 别 是 赋予 对 象 方法 的 位 置 。 下 面 是 用 动态 原 
型 方法 重 写 的 Car 类 : 


function Car(sColor,iDoors,iMpg) { 
this.color = sColor; 
this.doors = iDoors; 
this.mpg = iMpg; 
this.drivers = new Array("Mike","John"); 


if (‘typeof Car._initialized == "undefined"’) { 
Car.prototype.showColor = function() { 
alert(this.color); 


~*Car._initialized = true; ~ 
} 
} 


TY 


直到 检查 typeof Car._initialized 是 否 等 于 "undefined" 之 前 ， 这 个 构造 画 数 都 未 发 生变 化 。 这 
行 代 码 是 动态 原型 方法 中 最 重要 的 部 分 。 如 果 这 个 值 未 定义， 构造 图 数 将 用 原型 方式 继续 定 
义 对 象 的 方法 ， 然 后 把 Car._initialized 设置 为 true。 如 果 这 个 值 定 义 了 ( 它 的 值 为 true 时 ， 
typeof 的 值 为 Boolean) ， 那 么 就 不 再 创建 该 方法 。 简 而 言 之 ， 该 方法 使 用 标志 
(initialized) 来 判断 是 否 已 给 原型 赋予 了 任何 方法 。 该 方法 只 创建 并 赋值 一 次 ， 传 统 的 
OOP 开发 者 会 高 兴 地 发 现 ， 这 段 代 码 看 起 来 更 像 其 他 语言 中 的 类 定义 了 。 


混合 工厂 方式 


这 种 方式 通常 是 在 不 能 应 用 前 一 种 方式 时 的 变通 方法 。 它 的 目的 是 创建 假 构造 画 数 ， 只 返回 
另 一 种 对 象 的 新 实例 。 


这 段 代码 看 起 来 与 工厂 函数 非常 相似 : 


function Car() { 
‘var oTempCar = new Object; 
oTempCar.color = "blue"; 
oTempCar.doors = 4; 
oTempCar.mpg = 25; 
oTempCar.showColor = function() { 
alert(this.color); 


return oTempCar; 
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与 经 典 方式 不 同 ， 这 种 方式 使 用 new 运算 符 ， 使 它 看 起 来 像 真正 的 构造 画 数 : 


var car = new Car(); 


由 于 在 Car() Hise HWAASAS new 运算 符 ， 所 以 将 忽略 第 二 个 new 运算 符 (FMI 
数 之 外 ) ， 在 构造 画 数 内 部 创建 的 对 象 被 传递 回 变量 caro 


这 种 方式 在 对 象 方法 的 内 部 管理 方面 与 经 典 方式 有 着 相同 的 问题 。 强 烈 建议 : 除非 万 不 得 
已 ， 还 是 避免 使 用 这 种 方式 。 


采用 哪 种 方式 


如 前 所 述 ， 目 前 使 用 最 广泛 的 是 混合 的 构造 画 数 /原型 方式 。 此 外 ， 动 态 原始 方法 也 很 流行 ， 
在 功能 上 和 与 构造 本 数 /原型 方式 等 价 。 可 以 采用 这 两 种 方式 中 的 任何 一 种 。 不 过 不 要 单独 使 用 
经 典 的 构造 画 数 或 原型 方式 ， 因 为 这 样 会 给 代码 引入 问题 。 


实例 


对 象 舍 人 感 兴 趣 的 一 点 是 用 它们 解决 问题 的 方式 。ECMAScript 中 最 常见 的 一 个 问题 是 字符 串 
连接 的 性 能 。 与 其 他 语言 类 似 ，ECMAScript 的 字符 串 是 不 可 变 的 ， 即 它们 的 值 不 能 改变 。 请 
考虑 下 面 的 代码 : 


var str = "hello " 
str += "world"; 


实际 上 ， 这 段 代码 在 幕后 执行 的 步骤 如 下 : 


创建 存储 "hello " 的 字符 串 。 
创建 存储 "world" 的 字符 串 。 

创建 存储 连接 结果 的 字符 串 。 

把 str 的 当前 内 容 复制 到 结果 中 。 
把 "world" 复制 到 结果 中 。 

更 新 str， 使 它 指向 结果 。 


oak WN > 


每 次 完成 字符 串 连 接 都 会 执行 步骤 2 到 6， 使 得 这 种 操作 非常 消耗 资源 。 如 果 重 复 这 一 过 程 
几 百 次 ， 甚 至 几 千 次 ， 就 会 造成 性 能 问题 。 解 决 方法 是 用 Array 对 象 存储 字符 串 ， 然 后 用 
join) 方法 〈 参 数 是 空 字符 串 ) 创建 最 后 的 字符 串 。 想 象 用 下 面 的 代码 代 蔡 前 面 的 代码 : 


var arr = new Array(); 
arr[0] = "hello "; 
arr[1] = "world"; 
var str = arr.join(""); 


这 样 ， 无 论 数组 中 引入 多 少 字符 串 都 不 成 问题 ， 因 为 只 在 调用 join) 方法 时 才 会 发 生 连 接 操 
作 。 此 时 ， 执 行 的 步骤 如 下 : 


1. 创建 存储 结果 的 字符 串 
2， 把 每 个 字符 串 复 制 到 结果 中 的 合适 位 置 


虽然 这 种 解决 方案 很 好 ， 但 还 有 更 好 的 方法 。 问题 是 ， 这 段 代 码 不 能 确切 反映 出 它 的 意图 。 
要 使 它 更 容易 理解 ， 可 以 用 StringBuffer 类 打包 该 功能 : 


function StringBuffer () { 
this._strings_ = new Array(); 


} 


StringBuffer.prototype.append = function(str) { 
this._strings_.push(str); 


J; 


StringBuffer.prototype.toString = function() { 
return this._strings_.join(""); 


fa 


这 段 代 码 首先 要 注意 的 是 strings 属性 ， 本 意 是 私有 属性 。 它 只 有 两 个 方法 ， 即 append() 和 
toString() 方法 。append() 方法 有 一 个 参数 ， 它 把 该 参数 附加 到 字符 串 数组 中 ，toString() 方 
法 调用 数组 的 join 方法 ， 返 回 真正 连接 成 的 字符 串 。 要 用 StringBuffer 对 象 连接 一 组 字符 串 ， 
可 以 用 下 面 的 代码 : 


var buffer = new StringBuffer (); 
buffer.append("hello "); 
buffer.append("world"); 

var result = buffer.toString(); 


TIY 


可 用 下 面 的 代码 测试 StringBuffer 对 象 和 传统 的 字符 串 连 接 方法 的 性 能 : 


var di = new Date(); 

var str = ""; 

for (var i=0; i < 10000; i++) { 
str += "text"; 


var d2 = new Date(); 


document .write("Concatenation with plus: " 
+ (d2.getTime() - di.getTime()) + " milliseconds"); 


var buffer = new StringBuffer(); 

d1 = new Date(); 

for (var i=0; i < 10000; i++) { 
buffer.append("text"); 

} 


var result = buffer.toString(); 
d2 = new Date(); 


document.write("<br />Concatenation with StringBuffer: " 
+ (d2.getTime() - di.getTime()) + " milliseconds"); 


TY 


这 段 代 码 对 字符 串 连 接 进 行 两 个 测试 ， 第 一 个 使 用 加 号 ， 第 二 个 使 用 StringBuffer 类 。 每 个 操 
作 都 连接 10000 个 字符 串 。 日 期 值 d1 和 d2 用 于 判断 完成 操作 需要 的 时 间 。 请 注意 ， 创 建 
Date 对 象 时 ， 如 果 没 有 参数 ， 赋 予 对 象 的 是 当前 的 日 期 和 时 间 。 要 计算 连接 操作 历经 多 少时 
间 ， 把 日 期 的 毫秒 表示 (用 getTime() 方法 的 返回 值 ) 相 减 即 可 。 这 是 衡量 JavaScript 性 能 
的 常见 方法 。 该 测试 的 结果 可 以 帮助 您 比较 使 用 StringBuffer 类 与 使 用 加 号 的 效率 差异 。 


ECMAScript 修改 对 象 


通过 使 用 ECMAScript， 不 仅 可 以 创建 对 象 ， 还 可 以 修改 已 有 对 象 的 行为 。 
prototype 属性 不 仅 可 以 定义 构造 男 数 的 属性 和 方法 ， 还 可 以 为 本 地 对 象 添加 属性 和 方法 。 


创建 新 方法 
通过 已 有 的 方法 创建 新 方法 


可 以 用 prototype 属性 为 任何 已 有 的 类 定义 新 方法 ， 就 像 处 理 自己 的 类 一 样 。 例 如 ， 还 记得 
Number 类 的 toString() 方法 吗 ? 如 果 给 它 传递 参数 16， 它 将 输出 十 六 进 制 的 字符 串 。 如 果 这 
个 方法 的 参数 是 2， 那么 它 将 输出 二 进 制 的 字符 串 。 我 们 可 以 创建 一 个 方法 ， 可 以 把 数字 对 象 
直接 转换 为 十 六 进 制 字 符 串 。 创 建 这 个 方法 非常 简单 : 


Number .prototype.toHexString = function() { 
return this.toString(16); 


在 此 环境 中 ， 关 键 字 this 指向 Number 的 实例 ， 因 此 可 完全 访问 Number 的 所 有 方法 。 有 了 
这 段 代 码 ， 可 实现 下 面 的 操作 : 


var INum = 15; 
alert(iNum.toHexString()); // 输 出 "F" 


TIY 


由 于 数字 15 等 于 十 六 进 制 中 的 F， 因 此 警告 将 显示 "F 


重 命名 已 有 方法 


我 们 还 可 以 为 已 有 的 方法 命名 更 易 懂 的 名 称 。 例 如 ， 可 以 给 Array 类 添加 两 个 方法 enqueue() 
和 dequeue()， 只 让 它们 反复 调用 已 有 的 push() 和 shift() 方法 即 可 : 


Array.prototype.enqueue = function(vitem) { 
this.push(vItem); 


Array.prototype.dequeue = function() { 
return this.shift(); 
J; 


TIY 


添加 与 已 有 方法 无 关 的 方法 


当然 ， 还 可 以 添加 与 已 有 方法 无 关 的 方法 。 例 如 ， 假 设 要 判断 某 个 项 在 数组 中 的 位 置 ， 没 有 
本 地 方法 可 以 做 这 种 事情 。 我 们 可 以 轻松 地 创建 下 面 的 方法 : 


Array.prototype.indexOf = function (vItem) { 
for (var i=0; i<this.length; i++) { 
if (vItem == this[i]) { 
return i; 


} 


return -1; 


该 方法 indexOf() 与 String 类 的 同名 方法 保持 一 致 ， 在 数组 中 检索 每 个 项 ， 直 到 发 现 与 传 进来 
的 项 相同 的 项 目 为 止 。 如 果 找 到 相同 的 项 ， 则 返回 该 项 的 位 置 ， 否 则 ， 返 回 -1。 有 了 这 种 定 
义 ， 我 们 可 以 编写 下 面 的 代码 : 


var aColors = new Array("red", "green", "blue"); 
alert(aColors.indexOf("green")); // 输 出 "1" 


TIY 


A 本 地 对 象 添 加 新 方法 


最 后 ， 如 果 想 给 ECMAScript 中 每 个 本 地 对 象 添加 新 方法 ， 必 须 在 Object 对 象 的 prototype 
mee ee 
象 做 任何 改变 ， 都 会 反应 在 所 有 本 地 对 象 上 。 例 如 ， 如 果 想 添加 一 个 用 警告 输出 对 象 的 当前 
值 的 方法 ， 可 以 采用 下 面 的 代码 : 


Object.prototype.showValue = function () { 
alert(this.valueOf()); 


var str = "hello"; 

var iNum = 25; 

str.showValue(); // 输 出 "hello" 

iNum. showValue(); // 输 出 "25" 
TIY 


这 里 ，String 和 Number 对 象 都 从 Object 对 象 继承 了 showValue() 方法 ， 分 别 在 它们 的 对 象 


上 调用 该 方法 ， 将 显示 "hello" 和 "25", 


重 定义 已 有 方法 


就 像 能 给 已 有 的 类 定义 新 方法 一 样 ， 也 可 重 定 义 已 有 的 方法 。 如 前 面 的 章节 所 述 ， 画 数 名 只 
是 指向 函数 的 指针 ， 因 此 可 以 轻松 地 指向 其 他 函数 。 如 果 修 改 了 本 地 方法 ， 如 toString()， 会 
出 现 什 么 情况 呢 ? 


Function.prototype.toString = function() { 
return "Function code hidden"; 


前 面 的 代码 完全 合法 ， 运 行 结果 完全 符合 预期 : 


function SayHI() { 
alert("hi"); 


alert(sayHi.toString()); // 输 出 "Function code hidden" 


TIY 


也 许 你 还 记得 ，Function 对 象 这 一 章 中 介绍 过 Function 的 toString) AAA AW ee 
的 源 代 码 。 履 盖 该 方法 ， 可 以 返回 另 一 个 字符 串 〈 在 这 个 例子 中 ， 可 以 返回 "Function code 
hidden") 。 不 过 ，toString() 指向 的 原始 函数 怎么 了 呢 ? 它 将 被 无 用 存储 单元 回收 程序 回收 ， 
因为 它 被 完全 废弃 了 。 没 有 能 够 恢复 原始 函数 的 方法 ， 所 以 在 覆盖 原始 方法 前 ， 比 较 安 全 的 
做 法 是 存储 它 的 指针 ， 以 便 以 后 的 使 用 。 有 时 你 甚至 可 能 在 新 方法 中 调用 原始 方法 : 


“Function.prototype.originalToString = Function.prototype.toString; © 
Function.prototype.toString = function() { 
if (this.originalToString().length > 100) { 
return "Function too long to display."; 


} else { 
return this.originalToString(); 


TIY 


在 这 段 代 码 中 ， 第 一 行 代码 把 对 当前 toString() 方法 的 引用 保存 在 属性 originalToString 中 。 

然后 用 定制 的 方法 覆盖 了 toString() 方法 。 新 方法 将 检查 该 图 数 源 代码 的 长 度 是 否 大 于 100。 
如 果 是 ， 就 返回 错误 信息 ， 说 明 该 本 数 代码 太 长 ， 否 则 调用 originalToString() A, WEE 
数 的 源 代码 。 


极 晚 绑 定 (Very Late Binding) 


从 技术 上 讲 ， 根 本 不 存在 极 晚 绑 定 。 本 书 采用 该 术语 描述 ECMAScript 中 的 一 种 现象 ， 即 能 
够 在 对 象 实 例 化 后 再 定义 它 的 方法 。 例 如 : 


var 0 = new Object(); 


Object.prototype.sayHi = function () { 
alert("hi"); 


o.sayHi(); 


WY 


在 大 多 数 程序 设计 语言 中 ， 必 须 在 实例 化 对 象 之 前 定义 对 象 的 方法 。 这 里 ， 方 法 sayHi() 是 在 
创建 Object 类 的 一 个 实例 之 后 来 添加 进来 的 。 在 传统 语言 中 不 仅 没 听 说 过 这 种 操作 ， 也 没 听 
说 过 该 方法 还 会 自动 赋予 Object 对 象 的 实例 并 能 立即 使 用 ( 接 下 来 的 一 行 ) 。 


注意 : 不 建议 使 用 极 晚 绑 定 方法 ， 因 为 很 难 对 其 跟踪 和 记录 。 不 过 ， 还 是 应 该 了 解 这 种 可 


Ab 
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ECMAScript 继承 


ECMAScript 继承 机 制 实例 


本 节 使 用 一 个 经 典 的 例子 解释 ECMAScript 的 继承 机 制 。 


继承 机 制 实例 


说 明 继承 机 制 最 简单 的 方式 是 ， 利 用 一 个 经 典 的 例子 - 几何 形状 。 实 际 上 ， 几 何 形状 只 有 两 
种 ， 即 椭圆 形 (是 圆 形 的 ) 和 多 边 形 (具有 一 定数 量 的 边 ) 。 圆 是 椭圆 的 一 种 ， 它 只 有 一 个 
焦点 。 三 角形 、 矩 形 和 五 边 形 都 是 多 边 形 的 一 种 ， 具 有 不 同 数量 的 边 。 正 方形 是 矩形 的 一 
种 ， 所 有 的 边 等 长 。 这 就 构成 了 一 种 完美 的 继承 关系 。 


在 这 个 例子 中 ， 形 状 (Shape) 2H (Ellipse) 和 多 边 形 (Polygon) 的 基 类 (base 
class) (所 有 类 都 由 它 继承 而 来 ) 。 椭 圆 有 具有 一 个 属性 foci， 说 明 椭 圆 县 有 的 焦点 的 个 数 。 
圆 形 (Circle) 继承 了 椭圆 形 ， 因 此 圆 形 是 椭圆 形 的 子 类 (subclass) ， 椭 圆 形 是 圆 形 的 超 类 
(superclass) 。 同 样 ， 三 角形 (Triangle) . Æ (Rectangle) 和 五 边 形 (Pentagon) 都 
是 多 边 形 的 子 类 ， 多 边 形 是 它们 的 超 类 。 最 后 ， 正 方形 (Square) 继承 了 矩形 。 


最 好 用 图 来 解释 这 种 继承 关系 ， 这 是 UML (统一 建 模 语言 ) 的 用 武之 地 。UML 的 主要 用 途 之 
一 是 ， 可 视 化 地 表示 像 继承 这 样 的 复杂 对 象 关系 。 下 面 的 图 示 是 解释 Shape 和 它 的 子 类 之 间 
关系 的 UML 图 示 : 





在 UML 中 ， 每 个 方 框 表 示 一 个 类 ， 由 类 名 说 明 。 三 角形 、 矩 形 和 五 边 形 顶 部 的 线段 汇集 在 一 
起 ， 指 向 形状 ， 说 明 这 些 类 都 由 形状 继承 而 来 。 同 样 ， 从 正方 形 指向 和 矩形 的 箭头 说 明了 它们 
之 间 的 继承 天 系 。 


ECMAScript 继承 机 制 实现 


继承 机 制 的 实现 


要 用 ECMAScript 实现 继承 机 制 ， 您 可 以 从 要 继承 的 基 类 人手 。 所 有 开发 者 定义 的 类 都 可 作 
为 基 类 。 出 于 安全 原因 ， 本 地 类 和 宿主 类 不 能 作为 基 类 ， 这 样 可 以 防止 公用 访问 编译 过 的 浏 
览 器 级 的 代码 ， 因 为 这 些 代码 可 以 被 用 于 悉 意 攻击 。 


选 定 基 类 后 ， 就 可 以 创建 它 的 子 类 了 。 是 否 使 用 基 类 完全 由 你 决定 。 有 时 ， 你 可 能 想 创建 一 
个 不 能 直接 使 用 的 基 类 ， 它 只 是 用 于 给 子 类 提供 通用 的 函数 。 在 这 种 情况 下 ， 基 类 被 看 作 抽 
RH, 

RE ECMAScript 并 没有 像 其 他 语言 那样 严格 地 定义 抽象 类 ， 但 有 时 它 的 确 会 创建 一 些 不 多 
许 使 用 的 类 。 通 常 ， 我 们 称 这 种 类 为 抽象 类 。 


创建 的 子 类 将 继承 超 类 的 所 有 属性 和 方法 ， 包 括 构 造 画 数 及 方法 的 实现 。 记 住 ， 所 有 属性 和 
方法 都 是 公用 的 ， 因 此 子 类 可 直接 访问 这 些 方法 。 子 类 还 可 添加 超 类 中 没有 的 新 属性 和 方 
法 ， 也 可 以 覆盖 超 类 的 属性 和 方法 。 


继承 的 方式 


和 其 他 功能 一 样 ，ECMAScript 实现 继承 的 方式 不 止 一 种 。 这 是 因为 JavaScript 中 的 继承 机 
制 并 不 是 明确 规定 的 ， 而 是 通过 模仿 实现 的 。 这 意味 着 所 有 的 继承 细节 并 非 完 全 由 解释 程序 
处 理 。 作 为 开发 者 ， 你 有 权 决 定 最 适用 的 继承 方式 。 


下 面 为 您 介绍 几 种 具体 的 继承 方式 。 


对 象 冒充 


构想 原始 的 ECMAScript 时 ， 根 本 没 打算 设计 对 象 冒 充 (object masquerading) 。 它 是 在 开 
发 者 开始 理解 函数 的 工作 方式 ， 尤 其 是 如 何在 函数 环境 中 使 用 this 关键 字 后 才 发 展 出 来 。 


其 原理 如 下 : Mis MBH this 关键 字 给 所 有 属性 和 方法 赋值 (RAR RN Hews 
A) 。 因 为 构造 男 数 只 是 一 个 画 数 ， 所 以 可 使 ClassA His WAKA ClassB 的 方法 ， 然 后 调 
用 它 。ClassB 就 会 收 到 ClassA 的 构造 画 数 中 定义 的 属性 和 方法 。 例 如 ， 用 下 面 的 方式 定义 
ClassA 和 ClassB : 


function ClassA(sColor) { 
this.color = sColor; 
this.sayColor = function () { 
alert(this.color); 


J; 
} 
function ClassB(sColor) { 
} 


还 记得 吗 ?关键 字 this 引用 的 是 构造 画 数 当前 创建 的 对 象 。 不 过 在 这 个 方法 中 ，this 指向 的 
所 属 的 对 象 。 这 个 原理 是 把 ClassA 作为 常规 男 数 来 建立 继承 机 制 ， 而 不 是 作为 构造 玉 数 。 如 
下 使 用 构造 函数 ClassB 可 以 实现 继承 机 制 : 


function ClassB(sColor) { 
this.newMethod = ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 


在 这 段 代 码 中 ， 为 ClassA 赋予 了 方法 newMethod (请 记 住 ， 函 数 名 只 是 指向 它 的 指针 ) o 
然后 调用 该 方法 ， 传 递 给 它 的 是 ClassB 构造 范 数 的 参数 sColor。 最 后 一 行 代 码 删 除了 对 
ClassA 的 引用 ， 这 样 以 后 就 不 能 再 调用 它 。 


所 有 新 属性 和 新 方法 都 必须 在 删除 了 新 方法 的 代码 行 后 定义 。 否 则 ， 可 能 会 覆盖 超 类 的 相关 
属性 和 方法 : 


function ClassB(sColor, sName) { 
this.newMethod = ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 


this.name = sName; 
this.sayName = function () { 
alert(this.name); 


}; 


为 证 明 前 面 的 代码 有 效 ， 可 以 运行 下 面 的 例子 : 


var objA = new ClassA("blue"); 

var objB = new ClassB("red", "John"); 
objA.sayColor(); // 输 出 "blue" 
objB.sayColor(); // 输 出 "red" 
objB.sayName(); // 输 出 "John" 


对 象 冒充 可 以 实现 多 重 继 承 


有 趣 的 是 ， 对 象 冒 充 可 以 支持 多 重 继承 。 也 就 是 说 ， 一 个 类 可 以 继承 多 个 超 类 。 用 UM 表示 
的 多 重 继承 机 制 如 下 图 所 示 : 









Classx ClassY 






例如 ， 如 果 存 在 两 个 类 ClassX #l ClassY, ClassZ 想 继承 这 两 个 类 ， 可 以 使 用 下 面 的 代码 : 


function ClassZ() { 
this.newMethod = ClassX; 
this.newMethod(); 
delete this.newMethod; 


this.newMethod = Classy; 


this.newMethod(); 
delete this.newMethod; 


ay 


REBGE—S Hin, WREATH ClassX 和 ClassY 具有 同名 的 属性 或 方法 ，ClassY 具有 
高 优先 级 。 因 为 它 从 后 面 的 类 继承 。 除 这 点 小 问题 之 外 ， 用 对 象 冒充 实现 多 重 继承 机 制 轻 而 


由 于 这 种 继承 方法 的 流行 ，ECMAScript 的 第 三 版 为 Function 对 象 加 入 了 两 个 方法 ， 即 call() 
和 apply()。 


call() 方法 


call() 方法 是 与 经 典 的 对 象 冒充 方法 最 相似 的 方法 。 它 的 第 一 个 参数 用 作 this 的 对 象 。 其 他 参 
数 都 直接 传递 给 琅 数 自身 。 例 如 : 


function sayColor(sPrefix,sSuffix) { 
alert(sPrefix + this.color + sSuffix); 


ji 


var obj = new Object(); 
obj.color = "blue"; 


sayColor.call(obj, "The color is ", "a very nice color indeed."); 


ENIFA, ER sayColor() 在 对 象 外 定义 ， 即 使 它 不 属于 任何 对 象 ， 也 可 以 引用 关键 字 
this, 对象 obj 的 color 属性 等 于 blue。 调 用 call) 方法 时 ， 第 一 个 参数 是 obj， 说 明 应 该 赋予 
sayColor() HAAR this 关键 字 值 是 obj。 第 二 个 和 第 三 个 参数 是 字符 串 。 它 们 和 与 sayColor() 


函数 中 的 参数 sPrefix 和 sSuffix 匹配 ， 最 后 生成 的 消息 "The color is blue, a very nice color 
indeed." 将 被 显示 出 来 。 


要 与 继承 机 制 的 对 象 冒 充 方法 一 起 使 用 该 方法 ， 只 需 将 前 三 行 的 赋值 、 调 用 和 删除 代码 替换 
Bly : 


function ClassB(sColor, sName) { 
//this.newMethod = ClassA; 
//this.newMethod(color); 
//delete this.newMethod; 
ClassA.call(this, sColor); 


this.name = sName; 
this.sayName = function () { 
alert(this.name); 
3; 
TIY 


这 里 ， 我 们 需要 让 ClassA 中 的 关键 字 this 等 于 新 创建 的 ClassB 对 象 ， 因 此 this 是 第 一 个 参 
数 。 第 二 个 参数 sSColor 对 两 个 类 来 说 都 是 唯一 的 参数 。 


apply() 方法 
apply) 方法 有 两 个 参数 ， 用 作 this 的 对 象 和 要 传递 给 函数 的 参数 的 数组 。 例 如 : 


function sayColor(sPrefix,sSuffix) { 
alert(sPrefix + this.color + sSuffix); 


}; 
var obj = new Object(); 
obj.color = "blue"; 


sayColor.apply(obj, new Array("The color is ", "a very nice color indeed.")); 


这 个 例子 与 前 面 的 例子 相同 ， 只 是 现在 调用 的 是 apply() 方法 。 调 用 apply() 方法 时 ， 第 一 个 
参数 仍 是 obj， 说 明 应 该 赋予 sayColor() HAAN this 关键 字 值 是 obj。 第 二 个 参数 是 由 两 个 
字符 串 构 成 的 数组 ， 与 sayColor() 函数 中 的 参数 sPrefix 和 sSuffix 匹配 ， 最 后 生成 的 消息 仍 
是 "The color is blue, a very nice color indeed."， 将 被 显示 出 来 。 


该 方法 也 用 于 蔡 换 前 三 行 的 赋值 、 调 用 和 删除 新 方法 的 代码 : 


function ClassB(sColor, sName) { 
//this.newMethod = ClassA; 
//this.newMethod(color); 
//delete this.newMethod; 
ClassA.apply(this, new Array(sColor)); 


this.name = sName; 
this.sayName = function () { 
alert(this.name); 


同 祥 的 ， 第 一 个 参数 仍 是 this， 第 二 个 参数 是 只 有 一 个 值 color 的 数组 。 可 以 把 ClassB 的 整 
+ arguments 对 象 作为 第 二 个 参数 传递 给 apply() 方法 : 


function ClassB(sColor, sName) { 
//this.newMethod = ClassA; 
//this.newMethod(color); 
//delete this.newMethod; 
ClassA.apply(this, arguments); 


this.name = sName; 


this.sayName = function () { 
alert(this.name); 


ay 


aa 只 有 超 类 中 的 参数 顺序 与 子 类 中 的 参数 顺序 完全 一 致 时 才 可 以 传递 参数 对 象 。 如 果 不 
就 必须 创建 一 个 单独 的 数组 ， 按 照 正确 的 顺序 放置 参数 。 此 外 ， 还 可 使 用 call() 方法 。 


原型 链 (prototype chaining) 


继承 这 种 形式 在 ECMAScript 中 原本 是 用 于 原型 链 的 。 上 一 绍 了 定义 类 的 原型 方式 。 原 
型 链 扩展 了 这 种 方式 ， 以 一 种 有 趣 的 方式 实现 继承 机 制 。 


在 上 一 章 学 过 ，prototype 对 象 是 个 模板 ， 要 实例 化 的 对 象 都 以 这 个 模板 为 基础 。 总 而 
prototype 对 象 的 任何 属性 和 方法 都 被 传递 给 那个 类 的 所 有 实例 。 原 型 链 利 用 这 种 功能 
继承 机 制 。 


Bx, 
KEI 


现 


如 果 用 原型 方式 重 定义 前 面 例 子 中 的 类 ， 它 们 将 变 为 下 列 形式 : 


function ClassA() { 


} 


ClassA.prototype.color = "blue"; 
ClassA.prototype.sayColor = function () { 
alert(this.color); 


}; 


function ClassB() { 


} 


`ClassB.prototype = new ClassA();. 


原型 方式 的 神奇 之 处 在 于 突出 蓝 色 代码 行 。 这 里 ， 把 ClassB 的 prototype 属性 设置 


ClassA 的 实例 。 


ClassB 的 prototype 属性 。 


NS 


这 很 有 意思 ， 因 为 想 要 ClassA 的 所 有 属性 和 方法 ， 但 又 不 想 逐 个 将 它们 
ClassA 的 实例 赋予 prototype 属性 更 好 的 方法 吗 ? 


BUR A ESR, 


与 对 象 冒充 相似 ， 子 类 的 所 有 属性 和 方法 都 必须 出 现在 prototype 属性 被 赋值 后 ， 因 为 在 它 之 
前 赋值 的 所 有 方法 都 会 被 删除 。 为 什么 ? AH prototype 属性 被 替换 成 了 新 对 象 ， 添 加 了 新 方 
法 的 原始 对 象 将 被 销毁 。 所 以 ， 为 ClassB 类 添加 name 属性 和 sayName() 方法 的 代码 如 


F: 


function ClassB() { 


} 


ClassB.prototype = new ClassA(); 


ClassB.prototype.name = ""; 
ClassB.prototype. SVEG = = function () { 
alert(this.name); 


}; 


可 通过 运行 


var objA = 
var objB = 
objA.color 
objB.color 


下 面 的 例子 测试 这 段 代 码 : 


new ClassA(); 
new ClassB(); 


"blue"; 
uredi; 


objB.name = "John"; 
objA.sayColor(); 
objB.sayColor(); 
objB.sayName(); 


TIY 


此 外 ， 在 原型 链 中 ，instanceof 运算 符 的 运行 方式 也 很 独特 。 


instanceof 为 ClassA 和 ClassB 都 返回 true。 例 如 : 


注意 : 调用 ClassA 的 构造 事 数 ， 没 有 给 它 传 递 参数 。 这 在 原型 链 中 是 标准 做 法 。 要 确保 构造 


对 ClassB 的 所 有 实例 ， 


var objB = new ClassB(); 
alert(objB instanceof ClassA); // 输 出 "true" 
alert(objB instanceof ClassB); // 输 出 "true" 


在 ECMAScript 的 弱 类 型 世界 中 ， 这 是 极其 有 用 的 工具 ， 不 过 使 用 对 象 冒充 时 不 能 使 用 它 。 


原型 链 的 弊端 是 不 支持 多 重 继承 。 记 住 ， 原 型 链 会 用 另 一 类 型 的 对 象 重 写 类 的 prototype 属 
性 。 


混 A BAN 


这 种 继承 方式 使 用 构造 函数 定义 类 ， 并 非 使 用 任何 原型 。 对 象 冒 充 的 主要 问题 是 必须 使 用 构 
造 画 数 方 式 ， 这 不 是 最 好 的 选择 。 不 过 如 果 使 用 原型 链 ， 就 无 法 使 用 带 参数 的 构造 男 数 了 。 
开发 者 如 何 选择 呢 ? 答案 很 简单 ， 两 者 都 用 。 


在 前 一 章 ， 我 们 鲁 经 讲解 过 创建 类 的 最 好 方式 是 用 构造 图 数 定义 属性 ， 用 原型 定义 方法 。 这 
种 方式 同 祥 适用 于 继承 机 制 ， 用 对 象 冒 充 继承 构造 画 数 的 属性 ， 用 原型 链 继承 prototype 对 象 
的 方法 。 用 这 两 种 方式 重 写 前 面 的 例子 ， 代 码 如 下 : 


function ClassA(sColor) { 
this.color = sColor; 
} 


ClassA.prototype.sayColor = function () { 
alert(this.color); 


}; 


function ClassB(sColor, sName) { 
*ClassA.call(this, sColor);~ 
this.name = sName; 


} 


‘ClassB.prototype = new ClassA();. 


ClassB.prototype.sayName = function () { 
alert(this.name); 


}; 


在 此 例子 中 ， 继 承 机 制 由 两 行 突出 显示 的 蓝 色 代码 实现 。 在 第 一 行 突 出 显示 的 代码 中 ， 在 
ClassB 构造 画 数 中 ， 用 对 象 冒充 继承 ClassA 类 的 sColor 属性 。 在 第 二 行 突 出 显示 的 代码 
中 ， 用 原型 链 继承 ClassA 类 的 方法 。 由 于 这 种 混合 方式 使 用 了 原型 链 ， 所 以 instanceof 运算 
符 仍 能 正确 运行 。 


下 面 的 例子 测试 了 这 段 代 码 : 


var objA = new ClassA("blue"); 

var objB = new ClassB("red", "John"); 
objA.sayColor(); // 输 出 "blue" 
objB.sayColor(); // 输 出 "red" 
objB. sayName( ) ; // 输 出 "John" 


W3School JavaScript & jQuery 教程 
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ECMAScript 继承 机 制 实 现 386 


Google 地 图 API 


Google 地 图 API Key 


开始 学 习 本 教程 前 ， 你 需要 拥有 一 个 免费 的 Google 地 图 API key。 


Ly 4 x 
Wha ? 
开始 学 习 本 教程 前 ， 你 需要 在 Google 上 申请 一 个 指定 的 AP key, 
通过 以 下 步骤 我 们 可 以 免费 获取 API key 。 
访问 https://code. google.com/apisiconsole/, 使 用 你 的 Google 三 号 登陆 。 


登陆 后 会 出 现 如 下 界面 : 


Start using the Google APIs console 


to manage your API usage 





Creating an APIs project will let you 


e Use Google APIs beyond anonymous limits 
e Monitor API usage and control API access 
e Share API management with a team 


Create project... 


点 击 "Create Project" #242. 
在 服务 列表 中 找到 Google Maps API v3, 然后 点 击 "off" (KW) 让 其 开启 该 服务 器 


在 下 一 个 步骤 中 ， 选 择 "| Agree..." 然后 点 击 "Accept" 按钮 。 现在 你 在 服务 列表 中 应 该 束 可 以 
看 到 Google Maps API v3 已 经 变 为 "on" (FÆ) KA. 

接着 在 左 侧 菜单 中 点 击 "API Access" ， 在 右 侧 栏 中 将 看 到 以 下 提示 "Create an OAuth 2.0 
client id...". 

点 击 "Create an OAuth 2.0 client id.…"， 将 弹出 一 个 表单 ， 表 单 需要 你 填 入 你 的 项 目 名 称 ， 项 
目 图 片 或 者 logo， 然 后 点 击 "Next" 按钮。 


然后 ， 我 们 需要 选择 应 用 类 型 ("Web application" : 网 站 应 用 ), 然后 填写 你 的 站 点 地 址 ， 之 后 
点 击 "Create Client Id" 按钮 即 可 。 


最 后 我 们 就 可 以 得 到 我 们 需要 的 API key, 如 下 图 所 示 : 


Simple API Access 
Use API keys to identify your project when you do not need to access user data. Learn more 


Key for browser apps (with referers) 


API key: AlzaSyDYOkkJiTPVd2U7aTOAwhc 9ySH60HxOIYM 
Referers: Any referer allowed 

Activated on: Mar 20, 2012 5:46 AM 

Activated by: support@wé@schools.com - you 


Create new Server key... | Create new Browser key... 


9 注意 : 保存 你 的 API key! ( 在 填写 的 指定 URL 中 开发 所 有 的 Google 地 图 应 用 你 需要 使 
用 该 API key). 


Google Maps 基础 


创建 一 个 简单 的 Google 地 图 


现在 让 我 们 创建 一 个 简单 的 Google 地 图 。 


以 下 是 显示 了 英国 伦敦 的 Google 地 图 : 


实例 


<!DOCTYPE html> 

<html> 

<head> 

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDYOkkJiTPVd2U7aTOAwhc9ySH60 
</script> 


<script> 
function initialize() 
{ 
var mapProp = { 
center:new google.maps.LatLng(51.508742, -0.120850), 
zoom:5, 
mapTypeld:google.maps.MapTypeId.ROADMAP 
var map=new google.maps.Map(document .getElementById("googleMap" ) 
,mapProp); 


google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 


<body> 
<div id="googleMap" style="width: 500px; height : 380px; "></div> 


</body> 
</html> 


Eee 


实例 解析 


我 们 以 以 上 实例 来 解析 Google 地 图 的 创建 过 程 。 





应 用 为 什么 要 声明 HTML5? 


<!DOCTYPE html> 


大 多 数 浏览 器 使 用 "标准 模式 " 的 HTML5 文档 泻 染 页 面 ， 这 就 意味 着 你 的 应 用 是 兼容 各 大 浏 
览 器 的 。 


另外 ， 如 果 没 有 DOCTYPE 标 签 ， 浏 览 器 则 使 用 混杂 模式 (quirks mode) 进 行 泻 染 页 面 内 容 。 


提示 : 点 该 注意 的 是 一 些 " 混 杂 模 式 "中 的 CSS 并 不 能 使 用 与 标准 模式 中 。 在 具体 的 应 用 中 ， 
所 有 基于 百分比 的 大 小 都 必须 从 父 块 元 素 继承 。 如 果 在 父 模 块 中 没有 指定 大 小 ， 默 认 值 为 0 x 
0 像素 。 如 果 你 想 使 用 百分比 ， 可 以 在 <style> 标签 中 声明 ， 如 下 所 示 : 


<style type="text/css"> 

html {height :100%} 

body {height :100%;margin:0;padding: 0} 
#googleMap {height :100%} 

</style> 


这 个 样式 声明 表明 地 图 模块 的 (GoogleMap) 应 HTML 高 度 为 100%。 


添加 Google 地 图 API Key 


在 以 下 实例 中 第 一 个 <script> 标签 中 必须 包含 Google 地 图 API : 





<script src="http://maps.googleapis.com/maps/api/js?key=_**YOUR_API_KEY**_&sensor=**_TRUE 


将 google 生 成 的 API key 放置 于 key BAH (key=YOUR_API_KEY). 





The sensor 参数 是 必须 的 ， 该 参数 用 于 指明 应 用 程序 是 否 使 用 一 个 传感器 (类 似 GPS 导航 ) 
来 定位 用 户 的 位 置 。 pees zE y true 或 者 false。 


HTTPS 


如 果 你 的 应 用 是 安全 的 HTTP(HTTPS:HTTP Secure) à A, RE LEA HTTPS 来 加 载 Google 
地 图 API : 


<script src="https://maps.googleapis.com/maps/api/js?key=_**YOUR_API_KEY**_&sensor=**_TRU 
EJ = 


FS MR 








同样 我 们 也 可 以 在 页 面 完全 载 入 后 再 加 载 Google 地 图 API. 


以 下 实例 使 用 了 window.onload 来 实现 页 面 完 全 载 入 后 加 载 Google 地 图 。 loadScript() 函数 
创建 了 加 载 Google 地 图 API <script> 标签 。 此 外 在 标签 的 末尾 添加 了 callback=initialize 参 
数 ， initialize() 作 为 回调 函数 会 在 API 完 全 坊 入 后 执行 : 


实例 


function loadScript() 
{ 


var script 
script.src 


} 


window.onload = loadScript; 


document.createElement("script"); 
"http://maps.googleapis.com/maps/api/js? key=AIzaSyDYOkkJiTPVd2U7aTOAwh 





aj 





定义 地 图 属性 
在 初始 化 地 图 前 ， 我 们 需要 先 创建 一 个 Map 属性 对 象 来 定义 一 些 地 图 的 属性 : 


var mapProp = { 
center:new google.maps.LatLng(51.508742, -0.120850), 
zoom:7, 
mapTypeld: google.maps.MapTypelId.ROADMAP 
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center (PDA) 
中 心 属性 指定 了 地 图 的 中 心 ， 该 中 心 通过 坐标 纬度， 经度) 在 地 图 上 创建 一 个 中 心 点 。 
Zoom (缩放 级 数 ) 
zoom 属性 指定 了 地 图 的 缩放 级 数 。zoom: 0 显示 了 整个 地 球 地 图 的 完全 缩放 。 
MapTypeld (地 图 的 初始 类 型 ) 
mapTypeld 属性 指定 了 地 图 的 初始 类 型 。 
mapTypeld 包 括 如 下 四 种 类 型 : 

e google.maps.MapTypeld.HYBRID : 显示 卫星 图 像 的 主要 街道 透明 层 

e google.maps.MapTypeld.ROADMAP : 显示 普通 的 街道 地 图 

e google.maps.MapTypeld.SATELLITE : 显示 卫星 图 像 

e google.maps.MapTypeld.TERRAIN : 显示 带 有 自然 特征 〈 如 地 形 和 植被 ) 的 地 图 
在 哪里 显示 Google 地 图 
通常 Google 地 图 使 用 于 <div> 元 素 中 : 


<div id="googleMap" style="width:500px;height:380px;"></div> 


注意 : 地 图 将 以 div 中 设置 的 大 小 来 显示 地 图 的 大 小 ， 所 以 我 们 可 以 在 <div> 元 素 中 设置 地 图 
的 大 小 。 


创建 一 个 Map 对 象 


var map=new google.maps.Map(document .getElementById("googleMap" ) 
,mapProp); 


以 上 代码 使 用 参数 (mapProp) 在 <div> 元 素 (id 为 googleMap) 创建 了 一 个 新 的 地 图 。 
提示 : 如 果 想 在 页 面 中 创建 多 个 地 图 ， 你 只 需要 添加 新 的 地 图 对 象 即 可 。 
以 下 实例 定义 了 四 个 地 图 实例 (四 个 地 图 使 用 了 不 同 的 地 图 类 型 ): 


实例 


var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2) ; 
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3) ; 
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4) ; 


加 载 地 图 


窗口 载 和 人 后 通过 执行 initialize() 函数 来 初始 化 Map 对 象 ， 这 样 可 以 确保 在 页 面 完 全 裁 入 后 再 
加 载 Google 地 图 : 


google.maps.event.addDomListener(window, 'load', initialize); 


Google th A 4m 


在 Google 地 图 中 添加 一 个 标记 


Google 地 图 - 4012 


壹 加 层 是 地 图 上 绑 定 到 经 度 / 纬 度 坐标 的 对 象 ， 会 随 您 拖 动 或 缩放 地 图 而 移动 。 
Google 地 图 API 有 如 下 几 种 司 加 层 : 


。 地 图 上 的 点 使 用 标记 来 显示 ， 通 常 显 示 自 定义 图 标 。 标 记 是 GMarker 类 型 的 对 象 ， 并 且 
可 以 利用 Glcon 类 型 的 对 象 来 自 定义 图 标 。 

地 图 上 的 线 使 用 折线 (表示 点 的 集合 ) 来 显示 。 线 是 类 型 为 GPolyline 的 对 象 。 

地 图 上 的 区 域 显示 为 多 边 形 (如 果 是 任意 形状 的 区 域 ) 或 底面 过 加 层 〈 如 果 是 和 矩形 区 
域 ) 。 多 边 形 类 似 于 闭合 的 折线 ， 因 此 可 以 是 任何 形状 。 地 面 受 加 层 通常 用 于 地 图 上 与 
图 块 有 直接 或 间接 关联 的 区 域 。 

。 地 图 本 身 使 用 图 块 合 加 层 显 示 。 如 果 您 有 自己 的 系列 图 块 ， 可 以 使 用 GTileLayerOverlay 
类 来 改变 地 图 上 已 有 的 图 块 ， 其 至 可 以 使 用 GMapType 来 创建 您 自己 的 地 图 类 型 。 

信息 窗口 也 是 一 种 特殊 的 和 琶 加 层 。 但 是 请 注意 ， 信 息 窗口 会 自动 添加 到 地 图 中 ， 并 且 地 
图 只 能 添加 一 个 类 型 为 GinfoWindow 的 对 象 。 


Google 地 图 - 添加 标记 


记 标 识 地 图 上 的 点 。 默 认 情况 下 ， 它 们 使 用 G_DEFAULT_ICON (您 也 可 以 指定 自 定义 图 
标 ) o GMarker 构造 函数 将 GLatLng 和 GMarkerOptions (可 选 ) 对 象 作为 参数 。 


标记 设计 为 可 交互 。 例 如 ， 默 认 情 况 下 它们 接收 "click" 事件 ， 常 用 于 在 事件 侦 听 器 中 打开 信 
息 窗 口 。 


通过 setMap() 方法 在 地 图 上 添加 标记 : 


实例 
RY 
var marker=new google.maps.Marker({ 


position:myCenter, 


marker.setMap(map) ; 


Google 地 图 - 可 拖 动 的 标记 


以 下 实例 将 减少 如 何 使 用 animation 属性 来 拖 动 标记 : 


实例 


marker=new google.maps.Marker({ 
position:myCenter, 
animation: google.maps.Animation.BOUNCE 


3); 


marker.setMap(map); 


Google 地 图 - 图 标 


标记 可 以 用 自 定义 的 新 图 标 来 显示 ， 以 替代 默认 图 标 : 


实例 


var marker=new google.maps.Marker({ 
position:myCenter, 
icon: 'pinkball.png' 
3); 


marker.setMap(map) ; 


Google 地 图 - 折线 


GPolyline 对 象 可 在 地 图 上 创建 线性 和 琶 加 层 。GPolyline 包括 一 系列 点 ， 并 创建 一 系列 有 序 连 
接 这 些 点 的 线段 。 
折线 支持 以 下 属性 : 

e path - 指定 了 多 个 直线 的 纬度 /经 度 坐 标 

e strokeColor - 指定 直线 的 十 六 进 制 颜色 值 (格式 : "#FFFFFF") 

e strokeOpacity - 指定 直线 的 透明 度 ( 该 值 为 0.0 到 1.0) 

e strokeWeight - 定义 线 的 宽度 ,以 像素 为 单位 。 

e editable - 定义 用 户 是 否 可 编辑 直线 (true/false) 


实例 


var myTrip = [stavanger, amsterdam, london]; 
var flightPath = new google.maps.Polyline({ 
path:myTrip, 
strokeColor:"#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2 
J); 


Google 地 图 - 多 边 形 


GPolygon 对 象 类 似 于 GPolyline 对 象 ， 因 为 它们 都 包括 一 系列 有 序 的 点 。 但 是 ， 多 边 形 不 像 
折线 一 样 有 两 个 端点 ， 而 是 设计 为 定义 形成 闭环 的 区 域 。 


和 折线 一 样 ， 您 可 以 自 定义 多 边 形 边 〈 线 ) 的 颜色 、 粗 细 和 透明 度 ， 以 及 封闭 的 填充 区 域 的 
颜色 和 透明 度 。 颜 色 应 是 十 六 进 制 数字 HTML 样式 。 


多 边 形 支持 以 下 属性 : 


。 path - 指定 多 个 直线 纬度 的 坐标 (第 一 个 和 最 后 一 个 坐标 是 相等 的 ) 
e strokeColor - 指定 直线 的 十 六 进 制 颜色 值 (格式 : "#FFFFFF") 

e strokeOpacity -指定 直线 的 透明 度 (该 值 为 0.0 到 1.0) 

e strokeWeight - 定义 线 的 宽度 ,以 像素 为 单位 。 

e fillColor - 指定 闭合 区 域 的 十 六 进 制 颜色 值 (格式 : "#FFFFFF") 

。 fillOpacity - 指定 填充 颜色 的 透明 度 (该 值 为 0.0 到 1.0) 

e editable - 定义 用 户 是 否 可 编辑 直线 (true/false) 


实例 


var myTrip = [stavanger, amsterdam, london, stavanger]; 
var flightPath = new google.maps.Polygon( { 
path:myTrip, 
strokeColor:"#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2, 
fillColor :"#0000FF", 
fillOpacity:0.4 
}); 


Google 地 图 - 


圆 支持 以 下 属性 : 


e center - 指定 圆 的 中 心 点 参数 google.maps.LatLng 

radius - 指定 圆 的 半径 ， 以 米 为 单位 

strokeColor - 指定 弧 线 的 十 六 进 制 颜色 值 (格式 : "#FFFFFF") 
strokeOpacity - 指定 弧 线 的 透明 度 (该 值 为 0.0 到 1.0) 


e strokeWeight -定义 线 的 宽度 ,以 像素 为 单位 。 

e fillColor - 指定 圆 的 十 六 进 制 颜色 值 填充 值 (格式 : "#FFFFFF") 
e fillOpacity - 指定 填充 颜色 的 透明 度 (该 值 为 0.0 到 1.0) 

。 定义 用 户 是 否 可 编辑 直线 (true/false) 


实例 


var myCity = new google.maps.Circle({ 
center:amsterdam, 
radius: 20000, 
strokeColor:"#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2, 
fillColor :"#0000FF", 
fillOpacity:0.4 

}); 


Google 地 图 - 信息 窗口 


在 一 个 标记 上 显示 一 个 文本 信息 窗口 : 


实例 


var infowindow = new google.maps.Infowindow({ 
content:"Hello World!" 
}); 


infowindow.open(map, marker); 


Google 地 图 - #0 8#F M 


Google Maps API 参考 手册 . 


Google 地 图 事件 
点 击 标记 缩放 地 图 - 绑 定 在 google 地 图 上 的 事件 。 


点 击 标记 缩放 地 图 


我 们 仍然 使 用 上 一 通 文 章 使 用 的 英国 伦敦 的 地 图 。 
点 用 户 点 击 标记 时 实现 缩放 地 图 的 功能 (点 击 标记 时 绑 定 地 图 缩放 事件 )。 
代码 如 下 : 


例 


将 


// Zoom to 9 when clicking on marker 
google.maps.event.addListener(marker, 'click',function() { 
map.setZoom(9); 
map.setCenter(marker.getPosition()); 


3); 


使 用 addListener() 事件 义理 程序 来 注册 事件 的 监听 。 该 方法 使 用 一 个 对 象 ， 一 个 事件 来 监 
听 ， 当 指定 的 事件 发 生 时 KAUSA. 


Berit 


Ri Ezi BRS AREER KRM GE ‘center 属性 ， 以 下 代码 使 用 center_changed 事件 
在 3 秒 后 标记 移 会 中 心 点 : 


google.maps.event.addListener(map, 'center_changed',function() { 
window.setTimeout(function() { 
map.panTo(marker.getPosition()); 
}, 3000) ; 
3); 


INN mit 标 记 时 打开 信息 /已 | Els 


点 击 标记 在 信息 窗口 显示 一 些 文本 信息 


例 


将 


var infowindow = new google.maps.Infowindow({ 
content:"Hello World!" 


}); 


google.maps.event.addListener(marker, 'click', function() { 
infowindow.open(map, marker); 


3); 


受 置 标记 及 打开 每 个 标记 的 信息 窗口 
当 用 户 点 击 地 图 时 执行 一 个 窗口 


用 户 点 击 地 图 某 个 位 置 时 使 用 placeMarker() 函数 在 指定 位 置 上 放置 一 个 标记 ， 并 弹出 信息 窗 
口 : 
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实例 


4, 


google.maps.event.addListener(map, 'click', function(event) { 
placeMarker(event.latLng); 


3); 


function placeMarker(location) { 
var marker = new google.maps.Marker({ 
position: location, 


map: map, 

3); 

var infowindow = new google.maps.InfoWindow( { 
content: 'Latitude: ' + location.lat() + 
"<br>Longitude: ' + location.1ng() 

3); 

infowindow.open(map, marker); 


} 
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Google 地 图 控件 集 


一 个 Google 地 图 - 默认 控件 集 设 置 


Google 地 图 - 默认 控件 集 设置 


当 使 用 一 个 标准 的 google 地 图 ， 它 的 默认 设置 如 下 : 


© .Zoom- 显 示 一 个 滑动 条 来 控制 map 的 Zoom 级 别 

e .PPan- 地 图 上 显示 的 是 一 个 平底 砚 样 的 控件 ， 点 击 4 个 角 平 移 地 图 

e .MapType- 人 允许 用 户 在 map types(roadmap 和 satallite) 之 间 切 换 

。 .StreetView- 显 示 为 一 个 街景 小 人 图 标 ， 可 拖 搜 到 地 图 上 某 个 点 来 打开 街景 


Google 地 图 - 更 多 控件 集 


除了 以 上 默认 控件 集 ,Google 还 有 : 


e .Scale- 显 示 地 图 比例 尺 
。 .Rotate- 显 示 一 个 小 的 圆周 图 标 ， 可 以 转动 地 图 
。 .verview Map- 从 一 个 广 域 的 视角 俯视 地 图 


创建 地 图 时 你 可 以 通过 设置 选项 指定 哪些 控件 集 显示 或 者 通过 调用 setOptions() 来 改变 地 图 
的 设置 选项 。 


Google 地 图 - 天 闭 默认 控件 集 


你 可 能 希望 能 够 关闭 默认 的 控件 集 。 
为 了 关闭 默认 控件 集 , 设 置地 图 的 disableDefaultUI 的 属性 为 true: 


实例 


disableDefaultUI:true 


Google 地 图 - 开 所 有 控件 集 


一 些 控件 集 默 认 显 示 在 地 图 上 ， 而 其 它 的 不 会 ， 除 非 你 设置 它们 。 


设置 控件 为 true 使 其 可 见 -设置 控件 为 false 则 隐藏 它 。 


以 下 实例 开启 所 有 的 控件 : 


实例 


panControl:true, 
zoomControl: true, 
mapTypeControl: true, 
scaleControl: true, 
streetViewControl:true, 
overviewMapControl: true, 
rotateControl:true 


Google 地 图 - 修改 控件 集 


某 些 地 图 控件 是 可 配置 的 。 通 过 制定 控件 选项 域 改变 控件 集 。 


F 举 个 例子 来 说 ， 修 改 Zoom 控件 的 选项 在 zoomControlOptions 指 定 。zoomControlOptions 包 
含 如 下 3 种 选项 : 


。 .google.maps.ZoomControlStyle.SMALL- 显 示 最 小 化 zoom 控件 
e .google.maps.ZoomControlStyle.LARGE- 显 示 标 准 zoom 滑 动 控 件 
e .google.maps.ZoomControlStyle.DEFAULT- 基 于 设备 和 地 图 大 小 ， 选 择 最 合适 的 控件 


实例 


zoomControl:true, 
ZoomControloptions: { 
style:google.maps .ZoomControlStyle.SMALL 


注意 : 如 果 需 要 修改 一 个 控件 ， 首 先 开启 控件 (设置 其 为 true)。 
另 一 个 控件 为 MapType 控件 。 
MapType 控件 可 显示 为 以 下 style 选项 之 一 : 


e google.maps.MapTypeControlStyle.HORIZONTAL _BAR， 用 于 在 水 平 栏 中 将 一 组 控件 显 
示 为 如 Google Maps 中 所 示 按 钮 。 

e google.maps.MapTypeControlStyle.DROPDOWN_MENU， 用 于 显示 单个 按钮 控件 ， 以 
便 您 从 下 拉 菜 单 中 选择 地 图 类 型 。 

e google.maps.MapTypeControlStyle.DEFAULT， 用 于 显示 "默认 "的 行为 ， 该 行为 取决 于 
屏幕 尺寸 ， 并 且 可 能 会 在 API 以 后 的 版 本 中 有 所 变化 。 


例 


将 


mapTypeControl:true, 
mapTypeControloptions: { 
style:goo0ogle.maps.MapTypeControlStyle.DROPDOWN_MENU 


} 


同样 你 可 以 使 用 ControlPosition 属 性 指定 控件 的 位 置 : 


实例 


mapTypeControl:true, 

mapTypeControloptions: { 
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
position:google.maps.ControlPosition.TOP_CENTER 


} 


Google 地 图 - 自 定义 控件 集 


创建 一 个 返回 伦敦 自 定义 控件 ， 用 于 点 击 事 件 : (如 果 地 图 被 抱 搜 ): 
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实例 


controlDiv.style.padding = '5px'; 

var controlUI = document.createElement('div'); 
controlUI.style.backgroundColor = 'yellow'; 
controlUI.style.border='1px solid'; 
controlUI.style.cursor = 'pointer'; 
controlUI.style.textAlign = 'center'; 
controlUI.title = 'Set map to London'; 
controlDiv.appendChild(controlUuI); 

var controlText = document.createElement('div'); 
controlText.style.fontFamily='Arial, sans-serif '; 
controlText.style.fontSize='12px'; 
controlText.style.paddingLeft = '4px'; 
controlText.style.paddingRight = '4px'; 
controlText.innerHTML = '<b>Home<b>' 
controlUI.appendChild(controlText); 


Google 地 图 - 控件 集 参考 手册 
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Google 地 图 类 型 


HYBRID 类 型 的 google 地 图 : 


Google 地 图 - 基本 地 图 类 型 


Google Maps API 中 提供 了 以 下 地 图 类 型 : 


e MapTypeId.ROADMAP ， 用 于 显示 默认 的 道路 地 图 视图 

© MapTypeId.SATELLITE ， 用 于 显示 Google 地 球 卫 星 图 片 
e MapTypeId.HYBRID ， 用 于 同时 显示 普通 视图 和 卫星 视图 
e MapTypeId.TERRAIN ， 用 于 根据 地 形 信 息 显 示 实 际 地 图 。 


要 通过 Map 修改 正在 使 用 的 地 图 类 型 ， 您 可 以 为 其 设置 mapTypeld 属性 : 


var mapProp = { 
center:new google.maps.LatLng(51.508742, -0.120850), 
zoom: 7, 
mapTypeld: google.maps.MapTypeId.HYBRID 

}; 


或 者 动态 修改 mapTypeld : 


map.setMapTypeId(google.maps.MapTypeId.HYBRID); 


Google 地 图 - 45° 图 像 


Google Maps API 针对 特定 位 置 支 持 特 殊 的 45° 图 像 。 


此 类 高 分 辩 率 图 像 可 提供 朝向 各 基本 方向 〈 未 南西 北 ) 的 透视 视图 。 对 于 支持 的 地 图 类 型 ， 
这 些 图 片 还 可 提供 更 高 的 缩放 级 别 。 


现 有 的 google.maps.MapTypeld.SATELLITE 和 google.maps.MapTypeld.HYBRID 地 图 类 型 
支持 高 缩放 级 别 的 45° 透视 图 像 (如 果 有 的 话 ) 。 如 果 您 放大 的 位 置 拥 有 此 类 图 像 ， 那 么 这 
些 地 图 类 型 将 会 自动 通过 以 下 方式 更 改 其 视图 : 


。 地 图 上 现 有 的 任何 平移 控件 都 将 会 变更 为 在 现 有 的 导航 控件 周围 添加 一 个 罗 意 转 轮 。 您 
mile oar E A ee eae 
准 包含 图 像 的 最 近 支 持 方向 。 

。 一 个 旋转 控件 将 会 间隙 显示 在 现 有 的 平移 和 缩放 控件 之 间 ， 它 可 用 于 将 图 像 围 绕 支持 方 
向 旋转 。 旋 转 控件 仅 支持 顺 时 针 方 向 旋转 。 

。 以 当前 位 置 为 中 心 的 45° 透视 图 像 将 会 替代 卫星 图 像 或 混合 图 像 。 默 认 情 况 下 ， 此 类 视 


图 会 朝向 北方 。 如 果 您 缩小 地 图 ， 则 地 图 会 重新 显示 默认 的 卫星 图 像 或 混合 图 像 。 
e MapType 控件 将 启用 子 菜单 切换 控件 ， 用 于 显示 45° 图 像 。 


注意 : 缩小 显示 45° 图 像 的 地 图 类 型 将 会 还 原 所 有 更 改 ， 并 重新 构建 原始 地 图 类 型 。 


以 下 示例 显示 了 意大利 威尼斯 公 器 宫 45" 视 图 : 


实例 


var mapProp = { 

center:myCenter, 

zoom:18, 

mapTypeld: google.maps.MapTypeId.HYBRID 
J; 


提示 : Google 正在 不 断 地 为 更 多 城市 添加 45° 图 像 。 有 关 最 新 信息 ， 请 参半 Google 地 图 上 
的 45° 图 像 列表 。 


Google 地 图 - é AAA 45° 图 像 - setTilt(0) 


您 可 以 通过 在 Map 对 象 上 调用 setTilt(0) 来 停 用 45° 图 像 。 要 启用 适用 于 支持 的 地 图 类 型 的 
45° 透视 图 像 ， 请 调用 setTilt(45)。 


实例 


map.setTilt(0); 


Google 地 图 - 参考 手册 
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Google tt ø API 参考 手册 


地 
EB xt KR 描述 
Map() 在 指定 的 HTML 容器 中 创建 新 的 地 图 ， 该 容器 通常 是 一 个 DIV 元 素 。 


FAI EH EL at K 


Marker 
MarkerOptions 
Markerlmage 


MarkerShape 


Animation 


InfoWindow 
InfoWindowOptions 
Polyline 
PolylineOptions 
Polygon 
PolygonOptions 
Rectangle 


RectangleOptions 
Circle 


CircleOptions 


GroundOverlay 


GroundOverlayOptions 


OverlayView 


MapPanes 


MapCanvasProjection 


HS ES BA xt KR 
MapsEventListener 


event 


MouseEvent 


创建 一 个 标记 。 


标记 的 选项 。 由 DirectionsRenderer 演 染 的 所 有 标记 都 将 使 用 
这 些 选项 。 


A structure representing a Marker icon or shadow image 


Defines the marker shape to use in determination of a 
marker's clickable region (type and coord) 


Specifies animations that can be played on a marker (bounce 
or drop) 


Creates an info window 

Options for rendering the info window 

Creates a polyline (contains path and stroke styles) 
Options for rendering the polyline 

Creates a polygon (contains path and stroke+fill styles) 
Options for rendering the polygon 

Creates a rectangle (contains bounds and stroke+fill styles) 
Options for rendering the rectangle 


Creates a circle (contains center+radius and stroke+fill 
styles) 


Options for rendering the circle 


描述 


It has no methods and no constructor. Its instances are returned 
from addListener(), addDomListener() and are eventually passed 
back to removeListener() 


Adds/Removes/Trigger event listeners 


Returned from various mouse events on the map and overlays 


控件 集 


ERAR 


MapTypeControlOptions 
MapTypeControlStyle 


OverviewMapControlOptions 


PanControlOptions 
RotateControlOptions 


ScaleControlOptions 
ScaleControlStyle 


StreetViewControlOptions 
ZoomControlOptions 


ZoomControlStyle 


ControlPosition 


描述 


Holds options for modifying a control (position and 
style) 


Specifies what kind of map control to display (Drop- 
down menu or buttons) 


Options for rendering of the overview map control 
(opened or collapsed) 


Options for rendering of the pan control (position) 
Options for rendering of the rotate control (position) 


Options for rendering of the scale control (position and 
style) 


Specifies what kind of scale control to display 


Options for rendering of the street view pegman control 
(position) 


Options for rendering of the zoom control (position and 
style) 


Specifies what kind of zoom control to display (large or 
small) 


Specifies the placement of controls on the map 


地 图 API Map() 构造 器 


mR 
实例 
创建 一 个 Google 地 图 : 

var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt) ; 
hh 、 ` 
Map() 构造 器 创建 了 一 个 新 的 地 图 并 插入 到 指定 的 HTML 元 素 中 (<div> 元 素 )。 
语法 


new google.maps.Map(_HTMLElement_,_MapOptions_) 


参数 值 


参数 描述 
HTMLElement 规定 要 把 地 图 放置 在 那个 HTML 元 素 中 。 
MapOptions 带 有 地 图 初始 化 变量 /选项 的 MapOptions 对 象 。 


Map() 的 方法 


方法 返回 值 描述 
fitBounds(LatLngBounds) None 


返回 当前 视 口 的 西南 续 
getBounds() LatLng,LatLng 度 /经 度 和 东北 纬度 /经 
度 


返回 地 图 的 中 心 的 纬度 / 


A 
经 SLO 


返回 包含 地 图 的 DOM 
对 象 。 


getCenter() LatLng 


getDiv() Node 


getHeading() 


getMapTypeld() 


getProjection() 


getStreetView() 


getTilt() 


getZoom() 


panBy(xnumber, ynumber) 


panTo(LatLng) 


panToBounds(LatLngBounds) 


setCenter(LatLng) 


setHeading(number) 


setMapTypeld(Map Typeld) 


setOptions(MapOptions) 


setStreetView(StreetViewPanorama) 


setTilt(number) 


setZoom(number) 


number 


HYBRID ROADMAP 
SATELLITE 
TERRAIN 

Projection 


StreetViewPanorama 


number 


number 


None 


None 


None 


None 


None 


None 


None 


None 


None 


None 


返回 航拍 图 像 的 罗盘 航 
向 (支持 SATELLITE 
和 HYBRID 地 图 类 
型 ) 。 


返回 当前 地 图 类 型 。 


返回 当前 
Projection (投影 ) 。 


返回 绑 定 到 地 图 的 默认 
的 


StreetViewPanorama. 


返回 航拍 图 像 的 入 射 角 
度数 (支持 
SATELLITE 和 
HYBRID 地 图 类 型 ) 。 


返回 地 图 的 当前 缩放 级 
别 。 


通过 以 像素 计 的 给 定 距 
离 改变 地 图 的 中 心 。 


改变 地 图 的 中 心 为 给 定 
的 LatLng。 


将 地 图 平移 所 需 的 最 小 
距离 以 包含 给 定 的 
LatLngBounds。 


设置 航拍 图 像 的 罗 胡 方 
向 〈 以 度 为 单位 进行 测 
量 ) ， 基 本 方向 为 北 
方 。 


改变 要 显示 的 地 图 类 
型 。 


绑 定 一 个 
StreetViewPanorama 
到 地 图 上 。 


设置 航拍 图 像 的 和 人 射 角 
度数 (支持 
SATELLITE 和 
HYBRID 地 图 类 型 ) 。 


Map() 的 属性 


属性 类 型 
controls Array. <MvcArray.<Node>> 
map Types Map TypeRegistry 


overlayMapTypes MVCArray. <mapType> 


Map() 的 事件 


描述 
要 附加 到 地 图 上 的 额外 控件 。 


按 字符 串 ID 划分 的 MapType 实例 的 
注册 表 。 
要 过 加 的 额外 地 图 类 型 。 


事件 


bounds_changed 


center_changed 


click 


dblclick 


drag 
dragend 
dragstart 


heading_changed 


idle 


maptypeid_changed 


mousemove 


mouseout 


mouseover 


projection _changed 


resize 
rightclick 
tilesloaded 


tilt_changed 


zoom_changed 


BR 


None 


None 


MouseEvent 


MouseEvent 


None 
None 


None 


None 


None 
None 


MouseEvent 


MouseEvent 


MouseEvent 
None 
None 
MouseEvent 
None 


None 


None 


描述 
当 可 视 区 域 范围 更 改 时 会 触发 此 事件 。 


当地 图 center (中 心 ) 属性 更 改 时 会 触发 此 事 
件 。 


当 用 户 点 击 地 图 (但 不 是 点 击 标记 或 信息 窗口 ) 
时 会 触发 此 事件 。 


当 用 户 双击 地 图 时 会 触发 此 事件 。 请 注意 ， 触 发 
此 事件 前 还 会 触发 点 击 事件 。 


当 用 户 拖 动 地 图 时 会 反复 触发 此 事件 。 
当 用 户 停止 拖 动 地 图 时 会 触发 此 事件 。 
当 用 户 开始 拖 动 地 图 时 会 触发 此 事件 。 
当地 图 heading (方向 ) 属性 更 改 时 会 触发 此 事 


o 


当地 图 在 平移 或 缩放 之 后 变 为 闲置 状态 时 会 触发 
此 事件 。 


当 mapTypeld 属性 更 改 时 会 触发 此 事件 。 


只 要 用 户 的 鼠标 在 地 图 容器 上 移动 ， 就 会 触发 此 
事件 。 


当 用 户 的 鼠标 从 地 图 容器 上 退出 时 会 触发 此 事 


当 用 户 的 鼠标 进入 地 图 容器 时 会 触发 此 事件 。 
当 投影 更 改 时 会 触发 此 事件 。 

当地 图 (div) 更 改 尺寸 时 会 触发 此 事件 。 
当 用 户 右 击 地 图 时 会 触发 此 事件 。 

当 可 见 图 块 载 人 完成 后 会 触发 此 事件 。 

当地 图 tilt OAR) 属性 更 改 时 会 触发 此 事件 。 


当地 图 zoom (缩放 ) 属性 更 改 时 会 触发 此 事 
件 。 


免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 随 之 而 来 的 
风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 法 律 问题 及 风险 不 承担 
任何 责任 。 


